/* Basis-Theme. * * Enthaelt nur, was der Renderer und die Kern-Addons brauchen. Alles * Gestalterische kommt aus den CSS-Variablen in config/app.php beziehungsweise * aus den Theme-Einstellungen im Backend - damit laesst sich das Aussehen * aendern, ohne diese Datei anzufassen. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.cms-body { margin: 0; background: var(--color-bg, #0b0d12); color: var(--color-text, #e8ecf5); font-family: var(--font-body, system-ui, sans-serif); line-height: 1.6; overflow-x: hidden; } img, video, canvas, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, inherit); line-height: 1.15; margin: 0 0 .5em; } p { margin: 0 0 1em; } /* --- Raster ------------------------------------------------------------ * * * Alle Rasterregeln stehen in :where(). Das setzt ihre Spezifitaet auf null, * dadurch gewinnt jedes echte Framework - insbesondere Bootstrap - automatisch. * * Der Grund: Bootstraps .container ist bei grossen Bildschirmen 1320px breit * und hat 12px Innenabstand. Eine eigene Regel mit .container (0,1,0) wuerde * das ueberschreiben, und uebernommene Seiten waeren ploetzlich schmaler als * vorher. Mit :where() ist dieses Raster nur der Rueckfall fuer den Fall, * dass gar kein Framework geladen ist. */ :where(.cms-container) { width: 100%; max-width: var(--container, 1320px); margin-inline: auto; padding-inline: 12px; } :where(.container) { width: 100%; max-width: var(--container, 1320px); margin-inline: auto; padding-inline: 12px; } :where(.container-fluid) { width: 100%; padding-inline: 12px; margin-inline: auto; } :where(.container-sm) { max-width: 540px; } :where(.container-md) { max-width: 720px; } :where(.container-lg) { max-width: 960px; } :where(.container-xl) { max-width: 1140px; } :where(.container-xxl) { max-width: 1320px; } /* Gutter als CSS-Variable, damit Zeile und Spalten zusammenpassen. */ :where(.row) { display: flex; flex-wrap: wrap; --gutter: 24px; margin-inline: calc(var(--gutter) / -2); } :where(.row > [class*="col-"]) { padding-inline: calc(var(--gutter) / 2); margin-bottom: var(--gutter); } :where(.g-0) { --gutter: 0px; } :where(.g-1) { --gutter: 8px; } :where(.g-2) { --gutter: 12px; } :where(.g-3) { --gutter: 18px; } :where(.g-4) { --gutter: 24px; } :where(.g-5) { --gutter: 40px; } :where(.align-items-start) { align-items: flex-start; } :where(.align-items-center) { align-items: center; } :where(.align-items-end) { align-items: flex-end; } :where(.align-items-stretch) { align-items: stretch; } :where(.justify-content-start) { justify-content: flex-start; } :where(.justify-content-center) { justify-content: center; } :where(.justify-content-end) { justify-content: flex-end; } :where(.justify-content-between) { justify-content: space-between; } :where(.justify-content-around) { justify-content: space-around; } :where(.align-self-start) { align-self: flex-start; } :where(.align-self-center) { align-self: center; } :where(.align-self-end) { align-self: flex-end; } :where(.align-self-stretch) { align-self: stretch; } /* Spalten. xs ist die Basis, die groesseren Breakpoints ueberschreiben sie. */ :where([class*="col-"]) { flex: 0 0 auto; width: 100%; min-width: 0; } /* --- Spaltenbreiten (generiert, als Rueckfall via :where()) --- */ :where(.col-1){width:8.333333%} :where(.col-2){width:16.666667%} :where(.col-3){width:25%} :where(.col-4){width:33.333333%} :where(.col-5){width:41.666667%} :where(.col-6){width:50%} :where(.col-7){width:58.333333%} :where(.col-8){width:66.666667%} :where(.col-9){width:75%} :where(.col-10){width:83.333333%} :where(.col-11){width:91.666667%} :where(.col-12){width:100%} :where(.offset-1){margin-left:8.333333%} :where(.offset-2){margin-left:16.666667%} :where(.offset-3){margin-left:25%} :where(.offset-4){margin-left:33.333333%} :where(.offset-5){margin-left:41.666667%} :where(.offset-6){margin-left:50%} :where(.offset-7){margin-left:58.333333%} :where(.offset-8){margin-left:66.666667%} :where(.offset-9){margin-left:75%} :where(.offset-10){margin-left:83.333333%} :where(.offset-11){margin-left:91.666667%} :where(.order-0){order:0} :where(.order-1){order:1} :where(.order-2){order:2} :where(.order-3){order:3} :where(.order-4){order:4} :where(.order-5){order:5} :where(.order-6){order:6} :where(.order-7){order:7} :where(.order-8){order:8} :where(.order-9){order:9} :where(.order-10){order:10} :where(.order-11){order:11} :where(.order-12){order:12} @media (min-width:576px){ :where(.col-sm-1){width:8.333333%} :where(.col-sm-2){width:16.666667%} :where(.col-sm-3){width:25%} :where(.col-sm-4){width:33.333333%} :where(.col-sm-5){width:41.666667%} :where(.col-sm-6){width:50%} :where(.col-sm-7){width:58.333333%} :where(.col-sm-8){width:66.666667%} :where(.col-sm-9){width:75%} :where(.col-sm-10){width:83.333333%} :where(.col-sm-11){width:91.666667%} :where(.col-sm-12){width:100%} :where(.offset-sm-1){margin-left:8.333333%} :where(.offset-sm-2){margin-left:16.666667%} :where(.offset-sm-3){margin-left:25%} :where(.offset-sm-4){margin-left:33.333333%} :where(.offset-sm-5){margin-left:41.666667%} :where(.offset-sm-6){margin-left:50%} :where(.offset-sm-7){margin-left:58.333333%} :where(.offset-sm-8){margin-left:66.666667%} :where(.offset-sm-9){margin-left:75%} :where(.offset-sm-10){margin-left:83.333333%} :where(.offset-sm-11){margin-left:91.666667%} :where(.order-sm-0){order:0} :where(.order-sm-1){order:1} :where(.order-sm-2){order:2} :where(.order-sm-3){order:3} :where(.order-sm-4){order:4} :where(.order-sm-5){order:5} :where(.order-sm-6){order:6} :where(.order-sm-7){order:7} :where(.order-sm-8){order:8} :where(.order-sm-9){order:9} :where(.order-sm-10){order:10} :where(.order-sm-11){order:11} :where(.order-sm-12){order:12} } @media (min-width:768px){ :where(.col-md-1){width:8.333333%} :where(.col-md-2){width:16.666667%} :where(.col-md-3){width:25%} :where(.col-md-4){width:33.333333%} :where(.col-md-5){width:41.666667%} :where(.col-md-6){width:50%} :where(.col-md-7){width:58.333333%} :where(.col-md-8){width:66.666667%} :where(.col-md-9){width:75%} :where(.col-md-10){width:83.333333%} :where(.col-md-11){width:91.666667%} :where(.col-md-12){width:100%} :where(.offset-md-1){margin-left:8.333333%} :where(.offset-md-2){margin-left:16.666667%} :where(.offset-md-3){margin-left:25%} :where(.offset-md-4){margin-left:33.333333%} :where(.offset-md-5){margin-left:41.666667%} :where(.offset-md-6){margin-left:50%} :where(.offset-md-7){margin-left:58.333333%} :where(.offset-md-8){margin-left:66.666667%} :where(.offset-md-9){margin-left:75%} :where(.offset-md-10){margin-left:83.333333%} :where(.offset-md-11){margin-left:91.666667%} :where(.order-md-0){order:0} :where(.order-md-1){order:1} :where(.order-md-2){order:2} :where(.order-md-3){order:3} :where(.order-md-4){order:4} :where(.order-md-5){order:5} :where(.order-md-6){order:6} :where(.order-md-7){order:7} :where(.order-md-8){order:8} :where(.order-md-9){order:9} :where(.order-md-10){order:10} :where(.order-md-11){order:11} :where(.order-md-12){order:12} } @media (min-width:992px){ :where(.col-lg-1){width:8.333333%} :where(.col-lg-2){width:16.666667%} :where(.col-lg-3){width:25%} :where(.col-lg-4){width:33.333333%} :where(.col-lg-5){width:41.666667%} :where(.col-lg-6){width:50%} :where(.col-lg-7){width:58.333333%} :where(.col-lg-8){width:66.666667%} :where(.col-lg-9){width:75%} :where(.col-lg-10){width:83.333333%} :where(.col-lg-11){width:91.666667%} :where(.col-lg-12){width:100%} :where(.offset-lg-1){margin-left:8.333333%} :where(.offset-lg-2){margin-left:16.666667%} :where(.offset-lg-3){margin-left:25%} :where(.offset-lg-4){margin-left:33.333333%} :where(.offset-lg-5){margin-left:41.666667%} :where(.offset-lg-6){margin-left:50%} :where(.offset-lg-7){margin-left:58.333333%} :where(.offset-lg-8){margin-left:66.666667%} :where(.offset-lg-9){margin-left:75%} :where(.offset-lg-10){margin-left:83.333333%} :where(.offset-lg-11){margin-left:91.666667%} :where(.order-lg-0){order:0} :where(.order-lg-1){order:1} :where(.order-lg-2){order:2} :where(.order-lg-3){order:3} :where(.order-lg-4){order:4} :where(.order-lg-5){order:5} :where(.order-lg-6){order:6} :where(.order-lg-7){order:7} :where(.order-lg-8){order:8} :where(.order-lg-9){order:9} :where(.order-lg-10){order:10} :where(.order-lg-11){order:11} :where(.order-lg-12){order:12} } @media (min-width:1200px){ :where(.col-xl-1){width:8.333333%} :where(.col-xl-2){width:16.666667%} :where(.col-xl-3){width:25%} :where(.col-xl-4){width:33.333333%} :where(.col-xl-5){width:41.666667%} :where(.col-xl-6){width:50%} :where(.col-xl-7){width:58.333333%} :where(.col-xl-8){width:66.666667%} :where(.col-xl-9){width:75%} :where(.col-xl-10){width:83.333333%} :where(.col-xl-11){width:91.666667%} :where(.col-xl-12){width:100%} :where(.offset-xl-1){margin-left:8.333333%} :where(.offset-xl-2){margin-left:16.666667%} :where(.offset-xl-3){margin-left:25%} :where(.offset-xl-4){margin-left:33.333333%} :where(.offset-xl-5){margin-left:41.666667%} :where(.offset-xl-6){margin-left:50%} :where(.offset-xl-7){margin-left:58.333333%} :where(.offset-xl-8){margin-left:66.666667%} :where(.offset-xl-9){margin-left:75%} :where(.offset-xl-10){margin-left:83.333333%} :where(.offset-xl-11){margin-left:91.666667%} :where(.order-xl-0){order:0} :where(.order-xl-1){order:1} :where(.order-xl-2){order:2} :where(.order-xl-3){order:3} :where(.order-xl-4){order:4} :where(.order-xl-5){order:5} :where(.order-xl-6){order:6} :where(.order-xl-7){order:7} :where(.order-xl-8){order:8} :where(.order-xl-9){order:9} :where(.order-xl-10){order:10} :where(.order-xl-11){order:11} :where(.order-xl-12){order:12} } @media (min-width:1400px){ :where(.col-xxl-1){width:8.333333%} :where(.col-xxl-2){width:16.666667%} :where(.col-xxl-3){width:25%} :where(.col-xxl-4){width:33.333333%} :where(.col-xxl-5){width:41.666667%} :where(.col-xxl-6){width:50%} :where(.col-xxl-7){width:58.333333%} :where(.col-xxl-8){width:66.666667%} :where(.col-xxl-9){width:75%} :where(.col-xxl-10){width:83.333333%} :where(.col-xxl-11){width:91.666667%} :where(.col-xxl-12){width:100%} :where(.offset-xxl-1){margin-left:8.333333%} :where(.offset-xxl-2){margin-left:16.666667%} :where(.offset-xxl-3){margin-left:25%} :where(.offset-xxl-4){margin-left:33.333333%} :where(.offset-xxl-5){margin-left:41.666667%} :where(.offset-xxl-6){margin-left:50%} :where(.offset-xxl-7){margin-left:58.333333%} :where(.offset-xxl-8){margin-left:66.666667%} :where(.offset-xxl-9){margin-left:75%} :where(.offset-xxl-10){margin-left:83.333333%} :where(.offset-xxl-11){margin-left:91.666667%} :where(.order-xxl-0){order:0} :where(.order-xxl-1){order:1} :where(.order-xxl-2){order:2} :where(.order-xxl-3){order:3} :where(.order-xxl-4){order:4} :where(.order-xxl-5){order:5} :where(.order-xxl-6){order:6} :where(.order-xxl-7){order:7} :where(.order-xxl-8){order:8} :where(.order-xxl-9){order:9} :where(.order-xxl-10){order:10} :where(.order-xxl-11){order:11} :where(.order-xxl-12){order:12} } /* --- Kopf, Navigation, Fuss ------------------------------------------- */ .cms-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .cms-header-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; } .cms-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; letter-spacing: .04em; } .cms-brand img { height: 40px; width: auto; } .cms-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--color-accent); color: var(--color-bg); font-weight: 900; } .cms-nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .cms-nav a { padding: 9px 14px; border-radius: 9px; text-decoration: none; color: var(--color-muted); font-weight: 600; } .cms-nav a:hover { color: var(--color-text); background: var(--color-border); } .cms-nav a.active { color: var(--color-accent); } .cms-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .cms-nav + .cms-header-actions { margin-left: 0; } .cms-user { color: var(--color-muted); font-size: 14px; } .cms-footer { border-top: 1px solid var(--color-border); padding: 32px 0; color: var(--color-muted); font-size: 14px; } /* Navigation auf kleinen Geraeten. Bewusst ohne JavaScript, damit sie auch dann funktioniert, wenn ein Skript scheitert. */ .cms-nav-button { display: none; } @media (max-width: 860px) { .cms-nav-button { display: block; margin-left: auto; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--color-border); cursor: pointer; position: relative; } .cms-nav-button span, .cms-nav-button span::before, .cms-nav-button span::after { position: absolute; left: 11px; width: 18px; height: 2px; background: currentColor; content: ""; } .cms-nav-button span { top: 19px; } .cms-nav-button span::before { top: -6px; left: 0; } .cms-nav-button span::after { top: 6px; left: 0; } .cms-nav { display: none; width: 100%; order: 10; flex-direction: column; padding-bottom: 12px; } .cms-nav-toggle:checked ~ .cms-nav { display: flex; } .cms-header-inner { flex-wrap: wrap; } } /* --- Buttons ----------------------------------------------------------- */ .cms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; transition: transform .12s ease, opacity .12s ease; } .cms-btn:hover { transform: translateY(-1px); } .cms-btn:active { transform: none; } /* Die Schriftfarbe folgt dem Schema, sie steht nicht fest. Vorher war hier #0b0d12 verdrahtet - fast schwarz. Auf dem goldenen Grundschema war das richtig, auf dem roten Gaming-Schema stand damit schwarze Schrift auf rotem Grund: schlecht lesbar und kein Zufall, sondern jedes Mal. Die Schemata bringen "color-on-primary" bereits mit; der Rückfallwert hält alte Schemata ohne die Angabe unverändert. */ .cms-btn-primary { background: var(--color-accent); color: var(--color-on-primary, #0b0d12); } /* * Knopf über die volle Breite. * * display:flex statt block, damit die Beschriftung mittig sitzt - bei * block wäre sie linksbündig und die Reihe sähe unruhig aus. */ .cms-btn-block { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 10px; } .cms-btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .cms-btn-outline { border-color: currentColor; color: var(--color-text); } .cms-btn-ghost { color: var(--color-muted); } .cms-btn-ghost:hover { color: var(--color-text); } .cms-btn-sm { padding: 7px 13px; font-size: 14px; } .cms-btn-lg { padding: 15px 28px; font-size: 18px; } /* --- Addons ------------------------------------------------------------ */ .cms-image img, .cms-video video { width: 100%; border-radius: var(--radius, 14px); } .cms-image figcaption { margin-top: 8px; color: var(--color-muted); font-size: 14px; } .cms-quote { margin: 0; padding: 20px 24px; border-left: 3px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; } .cms-quote cite { display: block; margin-top: 10px; color: var(--color-muted); font-style: normal; font-size: 14px; } .cms-list { padding-left: 1.25em; } .cms-divider { border: 0; border-top: 1px solid var(--color-border); margin: 28px 0; } .cms-addon-missing, .cms-addon-error { padding: 14px 18px; border: 1px dashed #d9534f; border-radius: 10px; color: #d9534f; } .cms-image-empty, .cms-video-empty { padding: 40px; text-align: center; color: var(--color-muted); border: 1px dashed var(--color-border); border-radius: var(--radius); } /* --- Geschuetzte Bereiche ---------------------------------------------- */ .cms-access-notice { padding: 32px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .cms-access-notice p { color: var(--color-muted); } .cms-map, .cms-member-area { border-radius: var(--radius); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); } .cms-map-loading, .cms-member-loading { display: grid; place-items: center; min-height: 200px; height: 100%; color: var(--color-muted); } /* --- Formulare und Panels ---------------------------------------------- */ .cms-centered { display: grid; place-items: center; min-height: 100vh; padding: 24px; } .cms-panel { width: 100%; max-width: 420px; padding: 32px; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); text-align: center; } .cms-panel h1 { font-size: 24px; } .cms-code { font-size: 56px; font-weight: 900; color: var(--color-accent); margin: 0; line-height: 1; } .cms-muted { color: var(--color-muted); } .cms-hint { color: var(--color-muted); font-size: 13px; text-align: left; } .cms-error { padding: 10px 14px; border-radius: 9px; background: rgba(217,83,79,.15); border: 1px solid rgba(217,83,79,.5); color: #ff9b97; font-size: 14px; } .cms-login-form { display: grid; gap: 14px; text-align: left; } .cms-login-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-muted); } .cms-login-form input { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: inherit; } .cms-login-form input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } .cms-login-account { display: grid; gap: 12px; justify-items: start; } /* --- Nächstes Match ------------------------------------------------------ */ /* * Wappen gegen Wappen. Das Raster hat drei Spalten mit gleich breiten * Außenspalten (1fr auto 1fr) – dadurch sitzt die Mitte wirklich in der * Mitte, auch wenn ein Teamname doppelt so lang ist wie der andere. Mit * flex und space-between wäre sie bei jedem Match woanders. */ .cms-match { padding: 26px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); text-align: center; } .cms-match-titel { margin: 0 0 4px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); } .cms-match-wettbewerb { margin: 0 0 20px; font-size: 13px; color: var(--color-muted); } .cms-match-paarung { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .cms-match-team { display: grid; justify-items: center; gap: 8px; min-width: 0; } .cms-match-wappen { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 60%, transparent); overflow: hidden; } .cms-match-wappen img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .cms-match-kuerzel { font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: .04em; color: var(--color-accent); } /* Ein langer Teamname darf die Paarung nicht auseinanderziehen. */ .cms-match-name { font-family: var(--font-heading); font-size: 18px; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; } .cms-match-tag { font-size: 12px; color: var(--color-muted); letter-spacing: .1em; } .cms-match-mitte { display: grid; gap: 5px; justify-items: center; } .cms-match-vs { font-family: var(--font-heading); font-size: 26px; letter-spacing: .1em; color: var(--color-muted); } .cms-match-stand { font-family: var(--font-heading); font-size: 34px; font-variant-numeric: tabular-nums; } .cms-match-stand i { margin: 0 6px; font-style: normal; color: var(--color-muted); } .cms-match-live { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #ff5f6d; } .cms-match-zeit { margin: 20px 0 0; font-size: 14px; color: var(--color-muted); } .cms-match-countdown { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); font-variant-numeric: tabular-nums; font-size: 13px; } .cms-match-countdown:empty { display: none; } .cms-match-maps { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; } .cms-match-maps li { padding: 4px 11px; border: 1px solid var(--color-border); border-radius: 99px; font-size: 12px; color: var(--color-muted); } /* * Karten mit hinterlegtem Kartensatz. * * Sie sehen anders aus als die übrigen - sonst probiert man alle durch und * merkt erst nach dem dritten, dass nur manche etwas tun. */ .cms-match-maps li.is-bekannt { position: relative; padding: 0; border: 0; } .cms-map-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-accent); font: inherit; font-size: 12px; cursor: pointer; } .cms-map-chip i { font-style: normal; font-size: 10px; opacity: .7; } .cms-map-chip:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); } /* * Die Vorschau. * * Sie liegt über dem Chip statt darunter: Die Kartenliste steht meist am * unteren Rand des Blocks, und nach unten wäre sie halb außerhalb. * * translateX(-50%) mit left:50% zentriert sie über dem Chip, unabhängig * davon, wie breit der Name ist. */ .cms-map-blick { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; display: grid; gap: 6px; justify-items: center; width: max-content; max-width: min(280px, 80vw); padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); } .cms-map-blick[hidden] { display: none; } .cms-map-blick img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 6px; } .cms-map-blick b { font-size: 13px; color: var(--color-text); } .cms-map-blick a { font-size: 12px; color: var(--color-accent); text-decoration: underline; } .cms-match-stream { margin: 16px 0 0; } .cms-match-stream a { color: var(--color-accent); text-decoration: underline; } .cms-match-leer { margin: 0; color: var(--color-muted); } /* Schmale Fassung für eine Seitenspalte. */ .cms-match.is-schmal { padding: 18px 16px; } .cms-match.is-schmal .cms-match-wappen { width: 58px; height: 58px; } .cms-match.is-schmal .cms-match-kuerzel { font-size: 17px; } .cms-match.is-schmal .cms-match-name { font-size: 14px; } .cms-match.is-schmal .cms-match-stand { font-size: 24px; } .cms-match.is-schmal .cms-match-paarung { gap: 10px; } /* * Auf schmalen Bildschirmen bleiben die drei Spalten. * * Untereinander gestapelt wäre es kein Duell mehr, sondern eine Liste – * und der Block lebt genau davon, dass zwei Wappen sich gegenüberstehen. * Statt zu stapeln, schrumpfen die Wappen. */ @media (max-width: 560px) { .cms-match-wappen { width: 62px; height: 62px; } .cms-match-kuerzel { font-size: 18px; } .cms-match-name { font-size: 14px; } .cms-match-stand { font-size: 26px; } .cms-match-paarung { gap: 10px; } } /* --- Spielplan und Ergebnisse -------------------------------------------- */ .cms-matchlist-titel { margin: 0 0 18px; font-family: var(--font-heading); } .cms-matchlist-kopf { margin: 26px 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); } .cms-matchlist-kopf:first-of-type { margin-top: 0; } .cms-matchlist-bilanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 24px; } .cms-matchlist-zahl { padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); text-align: center; } .cms-matchlist-zahl b { display: block; font-family: var(--font-heading); font-size: 26px; font-variant-numeric: tabular-nums; } .cms-matchlist-zahl small { font-size: 11px; color: var(--color-muted); } .cms-matchlist-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } /* * Eine Zeile: Datum links, Paarung mittig, Zusatz rechts. * * Der farbige Streifen links sagt bei gespielten Matches, wie es ausging - * schneller zu erfassen als zwei Zahlen. Die Zahlen stehen trotzdem da: * Farbe allein wäre für farbenblinde Besucher keine Auskunft. */ .cms-matchlist-zeile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } /* * Wie deutlich der Ausgang gezeigt wird, entscheidet die Einstellung am * Baustein - deshalb hängen die Farben an der Klasse des Kastens und nicht * an der Zeile allein. * * is-streifen nur der Rand links (zurückhaltend) * is-farbig Rand und Fläche (auf einen Blick lesbar) * is-schlicht gar keine Farbe (für ruhige Seiten) * * Die Farbtöne entstehen per color-mix aus der Oberfläche: Ein festes * Hellgrün säße auf einer dunklen Seite wie ein Aufkleber, ein festes * Dunkelgrün auf einer hellen wäre nicht zu lesen. */ .cms-matchlist { --cms-sieg: #34d399; --cms-niederlage: #ff6b7f; --cms-remis: #f2c14e; } .cms-matchlist.is-streifen .cms-matchlist-zeile.is-sieg, .cms-matchlist.is-farbig .cms-matchlist-zeile.is-sieg { border-left-color: var(--cms-sieg); } .cms-matchlist.is-streifen .cms-matchlist-zeile.is-niederlage, .cms-matchlist.is-farbig .cms-matchlist-zeile.is-niederlage { border-left-color: var(--cms-niederlage); } .cms-matchlist.is-streifen .cms-matchlist-zeile.is-remis, .cms-matchlist.is-farbig .cms-matchlist-zeile.is-remis { border-left-color: var(--cms-remis); } .cms-matchlist.is-farbig .cms-matchlist-zeile.is-sieg { background: color-mix(in srgb, var(--cms-sieg) 14%, var(--color-surface)); border-color: color-mix(in srgb, var(--cms-sieg) 30%, var(--color-border)); border-left-color: var(--cms-sieg); } .cms-matchlist.is-farbig .cms-matchlist-zeile.is-niederlage { background: color-mix(in srgb, var(--cms-niederlage) 14%, var(--color-surface)); border-color: color-mix(in srgb, var(--cms-niederlage) 30%, var(--color-border)); border-left-color: var(--cms-niederlage); } .cms-matchlist.is-farbig .cms-matchlist-zeile.is-remis { background: color-mix(in srgb, var(--cms-remis) 14%, var(--color-surface)); border-color: color-mix(in srgb, var(--cms-remis) 30%, var(--color-border)); border-left-color: var(--cms-remis); } /* --- Filterknöpfe -------------------------------------------------------- */ .cms-matchfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .cms-matchfilter-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-muted); font: inherit; font-size: 12px; letter-spacing: .04em; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; } .cms-matchfilter-knopf:hover { color: var(--color-text); border-color: var(--color-muted); } .cms-matchfilter-knopf:focus-visible { outline: 2px solid var(--color-primary, currentColor); outline-offset: 2px; } .cms-matchfilter-knopf.is-aktiv { color: var(--color-text); border-color: currentColor; background: color-mix(in srgb, var(--color-text) 8%, transparent); } .cms-matchfilter-zahl { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .65; } /* Die Zahl im Knopf färbt sich wie das, was sie zählt. */ .cms-matchfilter-knopf[data-matchfilter="sieg"].is-aktiv { border-color: var(--cms-sieg); color: var(--cms-sieg); } .cms-matchfilter-knopf[data-matchfilter="niederlage"].is-aktiv { border-color: var(--cms-niederlage); color: var(--cms-niederlage); } .cms-matchfilter-knopf[data-matchfilter="remis"].is-aktiv { border-color: var(--cms-remis); color: var(--cms-remis); } /* --- Statistik je Spieler ------------------------------------------------ */ .cms-matchlist-statistik { grid-column: 1 / -1; margin-top: 4px; } .cms-matchlist-statistik > summary { cursor: pointer; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); padding: 4px 0; } .cms-matchlist-statistik > summary:hover { color: var(--color-text); } /* Breite Tabellen scrollen in sich, nicht die Seite. */ .cms-matchlist-tabelle { overflow-x: auto; margin-top: 8px; } .cms-matchlist-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; } .cms-matchlist-tabelle th, .cms-matchlist-tabelle td { padding: 7px 10px; border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; } .cms-matchlist-tabelle th { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; } .cms-matchlist-tabelle tr:last-child td { border-bottom: 0; } /* * Zahlenspalten so schmal wie ihr Inhalt. * * Ohne das verteilt die Tabelle die Breite gleichmäßig und zwischen „K“ * und „T“ klafft mehr Platz als zwischen Name und Notiz - man sucht die * Zahl, die zur Zeile gehört. */ .cms-matchlist-tabelle .cms-num { width: 1%; text-align: right; font-variant-numeric: tabular-nums; } .cms-playerstats-platz { color: var(--color-muted); width: 1%; } .cms-playerstats .cms-matchlist-tabelle { margin-top: 0; } .cms-matchlist-datum { display: grid; text-align: center; min-width: 46px; } .cms-matchlist-datum b { font-size: 15px; font-variant-numeric: tabular-nums; } .cms-matchlist-datum small { font-size: 11px; color: var(--color-muted); } .cms-matchlist-paarung { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .cms-matchlist-team { font-weight: 600; overflow-wrap: anywhere; } .cms-matchlist-vs { font-size: 12px; color: var(--color-muted); } .cms-matchlist-stand { font-family: var(--font-heading); font-size: 18px; font-variant-numeric: tabular-nums; padding: 1px 9px; border-radius: 6px; background: color-mix(in srgb, var(--color-text) 8%, transparent); } .cms-matchlist-neben { display: grid; gap: 2px; text-align: right; font-size: 12px; color: var(--color-muted); } .cms-matchlist-leer { color: var(--color-muted); } /* Auf schmalen Geräten untereinander - drei Spalten wären dort gequetscht. */ @media (max-width: 620px) { .cms-matchlist-zeile { grid-template-columns: auto 1fr; } .cms-matchlist-neben { grid-column: 1 / -1; text-align: left; } } /* --- Formularbausteine: Registrierung und Neuigkeiten -------------------- */ .cms-form { max-width: 480px; padding: 22px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .cms-form h3 { margin: 0 0 6px; font-family: var(--font-heading); } .cms-form-intro { margin: 0 0 16px; color: var(--color-muted); font-size: 14px; line-height: 1.6; } .cms-form form { display: grid; gap: 14px; } .cms-form-feld { display: grid; gap: 5px; } .cms-form-feld > span { font-size: 13px; font-weight: 650; color: var(--color-muted); } .cms-form-feld input { padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); color: var(--color-text); font: inherit; } .cms-form-feld input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } .cms-form-feld small { font-size: 12px; line-height: 1.5; color: var(--color-muted); opacity: .8; } /* * Das Einwilligungskästchen. * * Der Text steht vollständig daneben und nicht als "Details anzeigen": * Wozu jemand zustimmt, muss er lesen können, ohne erst etwas aufklappen * zu müssen. align-items:start, damit das Kästchen bei mehrzeiligem Text * oben bleibt statt in der Mitte zu schweben. */ .cms-form-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.55; color: var(--color-muted); } .cms-form-check input { margin-top: 3px; } /* * Die Falle für Maschinen. * * Aus dem Bild geschoben statt display:none - manche Ausfüllhelfer * überspringen ausgeblendete Felder, und dann liefe die Falle ins Leere. * Für Vorlesegeräte ist sie über aria-hidden am Element ausgenommen. */ .cms-form-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cms-form-meldung { margin: 0; padding: 10px 13px; border-radius: 9px; font-size: 13.5px; line-height: 1.5; } .cms-form-meldung[hidden] { display: none; } .cms-form-meldung.is-bad { background: rgba(217, 83, 79, .15); border: 1px solid rgba(217, 83, 79, .45); color: #ff9b97; } .cms-form-fuss { margin: 14px 0 0; font-size: 13px; color: var(--color-muted); } .cms-form-fuss a { color: var(--color-accent); text-decoration: underline; } /* Die Antwort, die an die Stelle des Formulars tritt. */ .cms-form-fertig { display: grid; gap: 6px; padding: 16px 18px; border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); } .cms-form-fertig b { font-size: 15px; } .cms-form-fertig p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--color-muted); } .cms-form-aus { color: var(--color-muted); } .cms-form-aus p { margin: 0; } /* --- Animationen -------------------------------------------------------- */ .cms-anim { opacity: 0; will-change: transform, opacity; } .cms-anim.cms-anim-in { opacity: 1; } /* Wer Bewegung reduziert haben moechte, bekommt die Inhalte sofort und vollstaendig - niemals unsichtbar stehen bleibende Elemente. */ @media (prefers-reduced-motion: reduce) { .cms-anim { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Im Builder duerfen Animationen den Inhalt nie verstecken. */ .cms-builder-preview .cms-anim { opacity: 1 !important; transform: none !important; } /* ================================================================ Uebernommenes Stylesheet der bisherigen Website. Steht bewusst hinter dem Basis-Theme, damit es dessen Vorgaben ueberschreiben kann und die Seiten unveraendert aussehen. ================================================================ */ :root{--bg:#070707;--bg2:#0c0c0c;--panel:#111;--gold:#c7a25a;--gold2:#f2d18b;--text:#f4f0e8;--muted:#99958e;--line:rgba(255,255,255,.09);--serif:'Cinzel',serif;--display:'Bebas Neue',sans-serif;--body:'Inter',sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden}a{text-decoration:none;color:inherit}.z-2{z-index:2}.page-noise{position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(199,162,90,.1),transparent 65%);pointer-events:none;z-index:0;transform:translate(-50%,-50%)} .loading-screen{position:fixed;inset:0;background:#050505;z-index:9999;display:grid;place-items:center;transition:opacity .7s ease,visibility .7s ease}.loading-screen.hide{opacity:0;visibility:hidden}.loader-mark{display:flex;flex-direction:column;align-items:center;gap:18px}.loader-mark svg{width:72px;fill:none;stroke:var(--gold);stroke-width:2;animation:pulse 1.6s ease-in-out infinite}.loader-mark span{font:600 14px/1 var(--serif);letter-spacing:.45em;color:#ddd}.loading-screen:after{content:"";position:absolute;bottom:0;left:0;height:2px;background:var(--gold);animation:loadbar 1.4s ease forwards}@keyframes loadbar{from{width:0}to{width:100%}}@keyframes pulse{50%{filter:drop-shadow(0 0 14px rgba(199,162,90,.45));transform:scale(1.04)}} .nav-shell{padding:20px 0;transition:.35s;background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent)}.nav-shell.scrolled{padding:10px 0;background:rgba(6,6,6,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand-icon{width:44px;height:44px;border:1px solid rgba(199,162,90,.35);display:grid;place-items:center;transform:rotate(45deg)}.brand-icon svg{width:25px;fill:none;stroke:var(--gold);stroke-width:3;transform:rotate(-45deg)}.brand b{font:700 17px/1 var(--serif);letter-spacing:.14em;display:block}.brand small{font-size:7px;letter-spacing:.29em;color:var(--gold);display:block;margin-top:6px}.nav-link{font-size:12px!important;text-transform:uppercase;letter-spacing:.16em;color:#d4d1ca!important;padding:10px 14px!important}.nav-link:hover{color:var(--gold2)!important}.menu-lines{display:block;width:30px}.menu-lines i{display:block;height:1px;background:#fff;margin:7px 0}.btn{border-radius:0;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;padding:15px 22px}.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));border:0;color:#111;box-shadow:0 8px 30px rgba(199,162,90,.16)}.btn-gold:hover{color:#111;transform:translateY(-2px);box-shadow:0 12px 38px rgba(199,162,90,.24)}.btn-clean{border-color:rgba(255,255,255,.2)} .hero-section{position:relative;overflow:hidden;background:radial-gradient(circle at 65% 35%,#1f1a12 0,#0b0b0b 35%,#050505 78%)}.hero-section:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.02)),linear-gradient(to top,#070707 0,transparent 30%)}.hero-ambient{position:absolute;inset:-5%;background:radial-gradient(circle at 76% 42%,rgba(199,162,90,.13),transparent 32%),radial-gradient(circle at 24% 82%,rgba(117,79,33,.14),transparent 28%)}.hero-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to right,transparent,#000 35%,#000 80%,transparent)}.hero-orb{position:absolute;border:1px solid rgba(199,162,90,.13);border-radius:50%}.orb-1{width:650px;height:650px;right:-100px;top:80px}.orb-2{width:430px;height:430px;right:10px;top:190px}.hero-kicker,.section-label{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.24em;color:var(--gold2);font-weight:700;text-transform:uppercase}.hero-kicker span,.signature-line span{display:inline-block;width:54px;height:1px;background:var(--gold)}.hero-title{font:400 clamp(6rem,16vw,15rem)/.72 var(--display);letter-spacing:-.02em;margin:35px 0 25px;text-transform:uppercase}.hero-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--gold2);text-shadow:0 0 50px rgba(199,162,90,.12)}.hero-copy{font-size:clamp(1rem,1.25vw,1.22rem);line-height:1.8;color:#c9c5bd;max-width:720px}.hero-emblem-wrap{border-left:1px solid var(--line);padding-left:45px;display:flex;gap:24px;align-items:center;justify-content:flex-end}.hero-emblem{width:90px;fill:none;stroke:var(--gold);stroke-width:1.8;filter:drop-shadow(0 0 18px rgba(199,162,90,.16))}.hero-emblem-wrap small,.hero-emblem-wrap span{display:block;color:#817c73;font-size:8px;letter-spacing:.24em}.hero-emblem-wrap b{font:700 20px var(--serif);letter-spacing:.08em;color:var(--gold2);display:block;margin:6px 0}.scroll-indicator{position:absolute;left:3rem;bottom:2rem;display:flex;gap:12px;align-items:center;font-size:8px;letter-spacing:.23em;color:#8f8b83;z-index:3}.scroll-indicator i{width:1px;height:55px;background:linear-gradient(var(--gold),transparent);display:block;animation:scrollline 1.8s ease-in-out infinite}@keyframes scrollline{50%{transform:scaleY(.55);transform-origin:top}}.hero-index{position:absolute;right:3rem;bottom:2rem;font-size:8px;letter-spacing:.3em;color:#6d6963} .section-dark,.section-code{background:var(--bg)}.section-code{background:linear-gradient(180deg,#090909,#0d0d0d)}.display-heading{font:400 clamp(3.7rem,8vw,7.5rem)/.88 var(--display);letter-spacing:.01em;margin:24px 0 0}.display-heading span{color:var(--gold2)}.lead-copy{font:400 clamp(1.3rem,2vw,2rem)/1.55 var(--serif);color:#e8e2d7}.text-muted-custom{color:var(--muted);line-height:1.9;font-size:.98rem}.signature-line{display:flex;align-items:center;gap:16px;color:#a49e92;font-size:9px;letter-spacing:.2em;margin-top:28px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stat-card{padding:38px 24px;border-right:1px solid var(--line);position:relative}.stat-card:last-child{border:0}.stat-card strong{font:400 62px/1 var(--display);color:var(--gold2)}.stat-card sup{font-size:20px;color:var(--gold)}.stat-card span{display:block;text-transform:uppercase;color:#77736b;font-size:9px;letter-spacing:.18em;margin-top:8px}.marquee-section{background:var(--gold);color:#0c0c0c;padding:12px 0;overflow:hidden;position:relative;width:100%}.marquee-track{display:flex;align-items:center;justify-content:flex-start;width:max-content;min-width:max-content;will-change:transform;animation:marqueeLoop var(--marquee-duration,28s) linear infinite;transform:translate3d(0,0,0)}.marquee-group{display:flex;align-items:center;flex:0 0 auto;min-width:max-content}.marquee-group span{display:block;flex:0 0 auto;font:400 34px/1 var(--display);letter-spacing:.08em;white-space:nowrap;padding-right:0}@keyframes marqueeLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--marquee-step,50%)),0,0)}} .code-card{height:100%;min-height:300px;border:1px solid var(--line);padding:28px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.005));position:relative;overflow:hidden;transition:.35s}.code-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(199,162,90,.14),transparent 35%);opacity:0;transition:.3s}.code-card:hover{transform:translateY(-6px);border-color:rgba(199,162,90,.35)}.code-card:hover:before{opacity:1}.code-card .num{font:400 42px var(--display);color:rgba(199,162,90,.35);position:relative}.code-card .line{display:block;width:48px;height:1px;background:var(--gold);margin:32px 0;position:relative}.code-card h3{font:600 21px var(--serif);letter-spacing:.06em;position:relative}.code-card p{color:#918c84;line-height:1.8;font-size:.92rem;position:relative;margin-top:16px}.manifesto-panel{min-height:620px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(199,162,90,.14),transparent 28%),linear-gradient(130deg,#0c0c0c,#161109 50%,#080808)}.manifesto-panel:before,.manifesto-panel:after{content:"";position:absolute;border:1px solid rgba(199,162,90,.12);border-radius:50%;width:700px;height:700px;left:50%;top:50%;transform:translate(-50%,-50%)}.manifesto-panel:after{width:520px;height:520px}.manifesto-quote{font:500 clamp(2.3rem,5vw,5rem)/1.24 var(--serif);margin:35px auto;color:#ede7dd}.manifesto-quote em{color:var(--gold2);font-style:normal}.manifesto-sub{color:#89847c;letter-spacing:.06em} .rank-stack{border-top:1px solid var(--line)}.rank-card{display:grid;grid-template-columns:70px 1fr auto;gap:25px;align-items:center;border-bottom:1px solid var(--line);padding:24px 10px;transition:.35s}.rank-card:hover{padding-left:22px;background:linear-gradient(90deg,rgba(199,162,90,.07),transparent)}.rank-index{font:400 42px var(--display);color:#554f45}.rank-card small{color:var(--gold);font-size:8px;letter-spacing:.2em}.rank-card h3{font:600 24px var(--serif);margin:5px 0}.rank-card p{margin:0;color:#858078;font-size:.92rem}.rank-card>b{font:400 clamp(2rem,5vw,4.2rem) var(--display);color:rgba(255,255,255,.035);letter-spacing:.08em}.rank-main>b{color:rgba(199,162,90,.11)}.tiny-note{font-size:11px;color:#5f5b55}.section-history{background:#0a0a0a}.history-sticky{top:140px}.timeline{position:relative}.timeline:before{content:"";position:absolute;left:25px;top:0;bottom:0;width:1px;background:linear-gradient(var(--gold),rgba(255,255,255,.05))}.timeline-item{display:grid;grid-template-columns:52px 1fr;gap:30px;position:relative;padding-bottom:60px}.timeline-item>span{width:52px;height:52px;border:1px solid rgba(199,162,90,.35);background:#0a0a0a;display:grid;place-items:center;font:400 22px var(--display);color:var(--gold);z-index:1}.timeline-item small{font-size:8px;color:var(--gold);letter-spacing:.2em}.timeline-item h3{font:600 22px var(--serif);margin:7px 0 12px}.timeline-item p{color:#88837b;line-height:1.8}.contact-section{background:linear-gradient(#090909,#050505)}.contact-panel{border:1px solid rgba(199,162,90,.22);padding:clamp(30px,6vw,80px);position:relative;overflow:hidden;background:linear-gradient(125deg,rgba(199,162,90,.08),rgba(255,255,255,.015))}.contact-panel:before{content:"LMA";position:absolute;right:-20px;bottom:-100px;font:400 26rem/1 var(--display);color:rgba(255,255,255,.018)}.contact-panel p{color:#99948c;max-width:700px;line-height:1.8}.seal{width:240px;height:240px;border:1px solid rgba(199,162,90,.34);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;position:relative}.seal:before,.seal:after{content:"";position:absolute;inset:12px;border:1px dashed rgba(199,162,90,.18);border-radius:50%;animation:spin 18s linear infinite}.seal:after{inset:26px;animation-direction:reverse;animation-duration:13s}.seal svg{width:72px;fill:none;stroke:var(--gold);stroke-width:2}.seal span{font:700 14px var(--serif);letter-spacing:.17em;margin-top:10px}.seal small{font-size:6px;letter-spacing:.2em;color:#7e786f;margin-top:7px}@keyframes spin{to{transform:rotate(360deg)}}.footer{border-top:1px solid var(--line);background:#050505;color:#65615b;font-size:10px}.footer b{display:block;font:600 13px var(--serif);color:#cbc5bb;letter-spacing:.12em}.footer small{display:block;color:var(--gold);font-size:8px;margin-top:4px}.footer a{color:#bdb7ad} .reveal-up,.reveal-left,.reveal-right,.reveal-scale{will-change:transform,opacity} @media(max-width:991.98px){.nav-shell{background:rgba(6,6,6,.88);backdrop-filter:blur(14px);padding:12px 0}.navbar-collapse{padding:18px 0 8px}.hero-title{font-size:clamp(6rem,22vw,11rem);margin-top:24px}.scroll-indicator{left:1.5rem}.hero-index{right:1.5rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card:nth-child(2){border-right:0}.stat-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.display-heading{font-size:clamp(4rem,13vw,7rem)}.history-sticky{position:static!important}.rank-card{grid-template-columns:52px 1fr}.rank-card>b{display:none}.seal{width:200px;height:200px}} @media(max-width:575.98px){.brand-icon{width:38px;height:38px}.brand b{font-size:14px}.hero-section{min-height:780px!important}.hero-title{font-size:clamp(5rem,26vw,8rem);line-height:.78}.hero-copy{font-size:.96rem}.scroll-indicator{display:none}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{padding:25px 14px}.stat-card strong{font-size:46px}.code-card{min-height:260px}.rank-card p{font-size:.83rem}.timeline-item{gap:18px}.contact-panel{padding:28px 20px}.manifesto-panel{min-height:520px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.loading-screen{display:none}} /* Interactive header pack animation */ .hero-pack-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:auto;opacity:.95;mix-blend-mode:screen} .hero-section>.container-fluid,.hero-section>.scroll-indicator,.hero-section>.hero-index{pointer-events:none} .hero-section a,.hero-section button,.hero-section .hero-emblem-wrap{pointer-events:auto} .hero-section:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--mx,72%) var(--my,38%),rgba(199,162,90,.12),transparent 22%);transition:background .15s linear} @media (prefers-reduced-motion:reduce){.hero-pack-canvas{display:none}} /* Cinematic hero image */ .hero-photo{position:absolute;inset:0;z-index:0;background-image:url("../../uploads/lma-images/header.png");background-size:cover;background-position:center 44%;filter:saturate(.72) contrast(1.08) brightness(.58);transform:scale(1.035);animation:heroKenBurns 18s ease-in-out infinite alternate} .hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,3,3,.86) 0%,rgba(3,3,3,.52) 42%,rgba(3,3,3,.22) 72%,rgba(3,3,3,.55) 100%),linear-gradient(180deg,rgba(4,4,4,.34) 0%,rgba(4,4,4,.04) 35%,rgba(7,7,7,.86) 100%)} @keyframes heroKenBurns{0%{transform:scale(1.035) translate3d(0,0,0)}100%{transform:scale(1.095) translate3d(-1.2%,-.8%,0)}} .hero-section{background:#050505}.hero-ambient,.hero-grid,.hero-orb{z-index:1}.hero-pack-canvas{z-index:2}.hero-section>.container-fluid,.hero-section>.scroll-indicator,.hero-section>.hero-index{z-index:3}.hero-section:before{z-index:2;pointer-events:none} /* Premium cinematic slideshow */ .gallery-section{position:relative;background:linear-gradient(180deg,#080808 0%,#0c0a07 48%,#080808 100%);overflow:hidden}.gallery-section:before{content:"";position:absolute;width:650px;height:650px;border-radius:50%;right:-250px;top:-220px;background:radial-gradient(circle,rgba(199,162,90,.10),transparent 68%);pointer-events:none}.manada-carousel{position:relative;border:1px solid rgba(199,162,90,.18);box-shadow:0 30px 90px rgba(0,0,0,.45);overflow:hidden;background:#080808}.carousel-inner{overflow:hidden}.cinema-slide{position:relative;min-height:clamp(480px,62vw,760px);display:flex;align-items:flex-end;padding:clamp(32px,5vw,70px);background-size:cover;background-position:center;isolation:isolate}.cinema-slide:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.50) 45%,rgba(5,5,5,.16) 74%),linear-gradient(0deg,rgba(5,5,5,.92) 0%,transparent 60%)}.cinema-slide:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 72% 38%,rgba(199,162,90,.12),transparent 35%)}.cinema-one{background-image:url("../../uploads/lma-images/header.png");background-position:center 38%}.cinema-two{background-image:url("../../uploads/lma-images/1.png");background-position:68% center}.cinema-three{background-image:url("../../uploads/lma-images/2.png");background-position:30% center}.slide-content{max-width:790px}.slide-content small{display:block;color:var(--gold2);letter-spacing:.28em;font-size:10px;font-weight:700;margin-bottom:16px}.slide-content h3{font:400 clamp(3.2rem,7vw,7.3rem)/.88 var(--display);margin:0 0 18px;letter-spacing:.02em}.slide-content p{max-width:610px;color:#c5c0b7;font-size:clamp(.96rem,1.3vw,1.12rem);line-height:1.8;margin:0}.slide-no{position:absolute;right:clamp(24px,4vw,55px);top:clamp(24px,4vw,45px);font:400 clamp(4rem,8vw,8rem)/1 var(--display);color:rgba(255,255,255,.08);letter-spacing:.04em}.carousel-indicators{margin:0;left:clamp(28px,5vw,70px);right:auto;bottom:24px;gap:8px}.carousel-indicators [data-bs-target]{width:42px;height:2px;margin:0;border:0;background:#8f8779;opacity:.4;transition:.3s}.carousel-indicators .active{width:76px;background:var(--gold2);opacity:1}.carousel-control-prev,.carousel-control-next{top:auto;bottom:22px;width:54px;height:54px;border:1px solid rgba(255,255,255,.14);background:rgba(5,5,5,.48);backdrop-filter:blur(12px);opacity:1;transition:.3s}.carousel-control-prev{left:auto;right:92px}.carousel-control-next{right:28px}.carousel-control-prev:hover,.carousel-control-next:hover{background:var(--gold);border-color:var(--gold);color:#111}.carousel-arrow{font-size:25px;line-height:1}.cinema-slide{background-size:105% auto;will-change:background-size}.carousel-item.active .cinema-slide{animation:slideZoomReturn 4.8s cubic-bezier(.45,0,.25,1) both}@keyframes slideZoomReturn{0%{background-size:105% auto}48%{background-size:112% auto}88%,100%{background-size:105% auto}}.carousel-item.is-leaving .cinema-slide{animation:none!important;background-size:105% auto!important;transition:background-size .32s ease}@media(max-width:991.98px){.carousel-control-prev{right:78px}.carousel-control-next{right:18px}.carousel-control-prev,.carousel-control-next{width:48px;height:48px}.cinema-slide{min-height:560px}.carousel-indicators{left:24px}}@media(max-width:575.98px){.hero-photo{background-position:58% center}.cinema-slide{min-height:520px;padding:28px 22px 76px}.slide-content h3{font-size:3.8rem}.slide-no{font-size:4.6rem}.carousel-indicators{bottom:28px}.carousel-control-prev,.carousel-control-next{display:none}} /* ===== Multi-page navigation + global search ===== */ .nav-shell{background:linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,.16) 58%,transparent)!important;border-bottom:1px solid transparent} .nav-shell.scrolled{background:rgba(5,5,5,.78)!important;backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);border-bottom-color:rgba(255,255,255,.08)} .page-nav-link{position:relative}.page-nav-link:after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--gold2);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.page-nav-link.active{color:var(--gold2)!important}.page-nav-link.active:after{transform:scaleX(1)} .search-trigger{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);color:#ddd;height:38px;padding:0 13px;display:flex;align-items:center;gap:8px;text-transform:uppercase;font-size:9px;letter-spacing:.16em;transition:.25s}.search-trigger:hover{border-color:rgba(199,162,90,.55);color:var(--gold2);background:rgba(199,162,90,.07)}.search-trigger svg,.search-field-wrap svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6} .site-search{position:fixed;inset:0;z-index:10000;visibility:hidden;pointer-events:none}.site-search.open{visibility:visible;pointer-events:auto}.site-search-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);opacity:0;transition:opacity .3s}.site-search.open .site-search-backdrop{opacity:1}.site-search-panel{position:absolute;top:0;right:0;width:min(760px,100%);height:100%;background:linear-gradient(160deg,#121212,#080808 70%);border-left:1px solid rgba(199,162,90,.2);padding:clamp(28px,5vw,72px);overflow-y:auto;transform:translateX(102%);transition:transform .42s cubic-bezier(.22,.75,.2,1);box-shadow:-30px 0 90px rgba(0,0,0,.45)}.site-search.open .site-search-panel{transform:none}.search-topline{display:flex;align-items:center;justify-content:space-between;color:var(--gold);font:600 9px var(--serif);letter-spacing:.22em;text-transform:uppercase}.search-close{border:0;background:none;color:#aaa;font:300 38px/1 var(--body);padding:0;transition:.2s}.search-close:hover{color:#fff;transform:rotate(8deg)}.site-search h2{font:400 clamp(3.2rem,8vw,6.8rem)/.9 var(--display);margin:60px 0 26px}.search-field-wrap{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.24);padding:14px 0;gap:14px}.search-field-wrap svg{width:22px;height:22px;color:var(--gold2);flex:0 0 auto}.search-field-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:400 clamp(1rem,2vw,1.25rem) var(--body)}.search-field-wrap input::placeholder{color:#69665f}.search-field-wrap kbd{background:#171717;border:1px solid #333;color:#777;border-radius:2px;font:500 9px var(--body);padding:5px 7px}.search-meta{display:flex;justify-content:space-between;gap:20px;color:#6f6c65;font-size:9px;letter-spacing:.13em;text-transform:uppercase;margin:16px 0 34px}.search-results{display:grid;gap:10px}.search-result{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;border:1px solid rgba(255,255,255,.08);padding:18px 20px;background:rgba(255,255,255,.025);transition:.25s}.search-result:hover{border-color:rgba(199,162,90,.4);background:rgba(199,162,90,.055);transform:translateX(-4px)}.search-result-index{font:400 30px var(--display);color:rgba(199,162,90,.55)}.search-result small{display:block;color:var(--gold);font-size:8px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:5px}.search-result h3{font:600 17px var(--serif);margin:0 0 5px}.search-result p{font-size:12px;line-height:1.5;color:#87837b;margin:0}.search-result-arrow{font-size:20px;color:#736d63}.search-highlight{color:var(--gold2);font-weight:600}.search-empty{display:none;text-align:center;border:1px dashed rgba(255,255,255,.1);padding:55px 20px;color:#6f6b64}.search-empty.show{display:block}.search-empty span{font:400 38px var(--display);letter-spacing:.08em;color:#aaa}.search-empty p{font-size:12px;margin:8px 0 0} /* ===== Subpages ===== */ .subhero{min-height:78vh;position:relative;display:flex;align-items:flex-end;overflow:hidden;padding:170px 0 90px;background:#070707}.subhero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.88) 0,rgba(0,0,0,.50) 48%,rgba(0,0,0,.28)),linear-gradient(to top,#070707 0,transparent 40%)}.subhero-photo{position:absolute;inset:-4%;background-image:url("../../uploads/lma-images/header.png");background-size:cover;background-position:center 38%;filter:saturate(.65) contrast(1.08);animation:subHeroFloat 14s ease-in-out infinite alternate}.subhero-aufstieg .subhero-photo{background-position:center 55%;filter:saturate(.55) contrast(1.12) sepia(.08)}@keyframes subHeroFloat{from{transform:scale(1.04)}to{transform:scale(1.10) translate3d(-1%,1%,0)}}.subhero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to right,#000,transparent 82%);opacity:.16}.subhero-eyebrow{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.28em;color:var(--gold2);font-weight:700}.subhero-eyebrow span{width:55px;height:1px;background:var(--gold)}.subhero-title{font:400 clamp(6rem,16vw,14rem)/.72 var(--display);margin:30px 0 25px;text-transform:uppercase;letter-spacing:-.02em}.subhero-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--gold2)}.subhero-lead{max-width:850px;font:400 clamp(1.15rem,2vw,1.8rem)/1.55 var(--serif);color:#ded7ca}.subhero-lead strong{color:var(--gold2);font-weight:600}.subhero-scroll{display:inline-flex;align-items:center;gap:14px;margin-top:30px;color:#aaa;font-size:9px;letter-spacing:.19em}.subhero-scroll i{font-style:normal;color:var(--gold);font-size:18px}.subhero-code{position:absolute;right:4vw;bottom:35px;z-index:2;color:#6e695f;font-size:8px;letter-spacing:.28em} .oath-section,.ascenso-section{background:linear-gradient(180deg,#080808,#0b0b0b)}.oath-card{position:relative;border:1px solid rgba(199,162,90,.23);padding:clamp(28px,5vw,65px);background:radial-gradient(circle at 100% 0,rgba(199,162,90,.1),transparent 36%),rgba(255,255,255,.018);box-shadow:0 35px 90px rgba(0,0,0,.25)}.oath-card:before,.oath-card:after{content:"";position:absolute;width:50px;height:50px;border-color:var(--gold);opacity:.5}.oath-card:before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}.oath-card:after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}.oath-lang{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px}.oath-lang span{color:#777;font-size:9px;letter-spacing:.18em}.oath-lang b{color:var(--gold2);font:600 11px var(--serif);letter-spacing:.18em}.oath-lines p,.spanish-oath p{font:500 clamp(1.25rem,2.3vw,2rem)/1.45 var(--serif);padding:14px 0;margin:0;border-bottom:1px solid rgba(255,255,255,.06)}.oath-lines p:last-child,.spanish-oath p:last-child{border-bottom:0}.oath-lines .oath-final{color:var(--gold2);font-size:clamp(1.5rem,2.8vw,2.4rem);padding-top:28px}.oath-spanish{position:relative;background:#060606;overflow:hidden}.oath-spanish:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,rgba(199,162,90,.09),transparent 38%);pointer-events:none}.spanish-mark{position:absolute;left:4vw;top:30px;font:400 clamp(7rem,18vw,16rem)/1 var(--display);color:rgba(255,255,255,.025)}.ritual-heading{font:400 clamp(4rem,8vw,7.8rem)/.9 var(--display);margin:22px 0 50px}.ritual-heading span{color:var(--gold2)}.spanish-oath{max-width:850px;margin:auto;border-top:1px solid rgba(199,162,90,.2);border-bottom:1px solid rgba(199,162,90,.2);padding:20px 0;text-align:center}.spanish-oath p{font-size:clamp(1.1rem,2vw,1.6rem);color:#c7c0b4}.ritual-end{position:relative;background:radial-gradient(circle at 50% 45%,rgba(199,162,90,.12),transparent 35%),#090909;border-top:1px solid rgba(255,255,255,.06)}.ritual-wolf{width:95px;fill:none;stroke:var(--gold);stroke-width:1.5;margin-bottom:25px;filter:drop-shadow(0 0 20px rgba(199,162,90,.2))}.ritual-end small{display:block;color:var(--gold);font-size:9px;letter-spacing:.28em;margin-bottom:16px}.ritual-end h2{font:600 clamp(1.8rem,4vw,3.5rem)/1.25 var(--serif);margin:0}.ritual-end h2 span{color:var(--gold2)}.ritual-end p{font:400 clamp(2.8rem,7vw,6rem)/1 var(--display);color:var(--gold2);margin:24px 0}.subpage-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:35px}.ascenso-steps{position:relative}.ascenso-steps:before{content:"";position:absolute;left:31px;top:25px;bottom:25px;width:1px;background:linear-gradient(var(--gold),rgba(199,162,90,.08))}.ascenso-step{display:grid;grid-template-columns:64px 1fr;gap:25px;position:relative;padding:22px 0}.ascenso-step>span{width:64px;height:64px;border:1px solid rgba(199,162,90,.35);display:grid;place-items:center;background:#0b0b0b;color:var(--gold2);font:400 25px var(--display);z-index:1}.ascenso-step small{color:var(--gold);font-size:8px;letter-spacing:.2em}.ascenso-step h3{font:600 clamp(1.25rem,2vw,1.7rem) var(--serif);margin:6px 0 8px}.ascenso-step p{color:#858078;font-size:13px;line-height:1.7;margin:0}.promotion-words{background:linear-gradient(160deg,#0b0b0b,#070707)}.promotion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:1100px;margin:auto}.promotion-quote{margin:0;border:1px solid rgba(255,255,255,.08);padding:28px;font:500 clamp(1rem,1.7vw,1.35rem)/1.5 var(--serif);color:#c8c1b6;background:rgba(255,255,255,.018)}.promotion-main{grid-column:1/-1;text-align:center;border-color:rgba(199,162,90,.35);color:var(--gold2);font-size:clamp(1.4rem,2.5vw,2rem)}.rank-crown{width:82px;height:82px;display:grid;place-items:center;margin:0 auto 25px;border:1px solid rgba(199,162,90,.4);transform:rotate(45deg);color:var(--gold2);font:400 30px var(--display)}.rank-crown span{transform:rotate(-45deg)} @media(max-width:1199px){.search-trigger{margin:10px 14px;width:calc(100% - 28px);justify-content:center}.nav-shell .navbar-collapse{background:rgba(7,7,7,.96);margin:12px -12px -10px;padding:18px;border-top:1px solid rgba(255,255,255,.08)}} @media(max-width:767px){.subhero{min-height:72vh;padding:145px 0 65px}.subhero-title{font-size:clamp(5rem,25vw,8rem)}.subhero-code{display:none}.promotion-grid{grid-template-columns:1fr}.promotion-main{grid-column:auto}.search-result{grid-template-columns:42px 1fr}.search-result-arrow{display:none}.search-meta{flex-direction:column;gap:7px}.site-search-panel{padding:28px 22px}.site-search h2{margin-top:45px}} /* Numbered Ascenso steps */ .promotion-intro{max-width:720px;margin:-25px auto 50px;color:#8d887f;font-size:13px;line-height:1.8} .promotion-steps{max-width:980px;margin:auto;position:relative} .promotion-steps:before{content:"";position:absolute;left:42px;top:44px;bottom:44px;width:1px;background:linear-gradient(var(--gold),rgba(199,162,90,.08))} .promotion-step{display:grid;grid-template-columns:84px 1fr;gap:28px;align-items:start;padding:22px 0;position:relative} .promotion-no{width:84px;height:84px;display:grid;place-items:center;border:1px solid rgba(199,162,90,.38);background:#0a0a0a;color:var(--gold2);font:400 34px var(--display);z-index:1;transition:.3s} .promotion-step:hover .promotion-no{background:rgba(199,162,90,.09);box-shadow:0 0 35px rgba(199,162,90,.08)} .promotion-step small{display:block;color:var(--gold);font-size:8px;letter-spacing:.22em;margin:7px 0 7px}.promotion-step h3{font:600 clamp(1.35rem,2.3vw,2rem) var(--serif);margin:0 0 8px;color:#e9e3d8}.promotion-step p{color:#827e76;font-size:13px;line-height:1.7;margin:0;max-width:680px}.promotion-step-final h3{color:var(--gold2)} /* Mehr hub */ .subhero-mehr .subhero-photo{background-position:center 45%;filter:saturate(.42) contrast(1.15) brightness(.72)} .more-hub{background:linear-gradient(180deg,#080808,#0b0b0b)} .more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.more-card{position:relative;min-height:250px;padding:34px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 100% 0,rgba(199,162,90,.08),transparent 32%),rgba(255,255,255,.018);overflow:hidden;transition:.35s}.more-card:hover{transform:translateY(-5px);border-color:rgba(199,162,90,.35);background-color:rgba(199,162,90,.035)}.more-card>span{position:absolute;right:24px;top:12px;font:400 74px var(--display);color:rgba(255,255,255,.028)}.more-card small{color:var(--gold);font-size:8px;letter-spacing:.2em}.more-card h3{font:600 clamp(1.5rem,2.5vw,2.3rem) var(--serif);margin:26px 0 12px;color:#eee8dd}.more-card p{color:#88837a;font-size:13px;line-height:1.7;max-width:520px}.more-card b{position:absolute;bottom:28px;left:34px;color:#b7ae9d;font-size:9px;letter-spacing:.16em;font-weight:500}.more-card-wide{grid-column:1/-1} @media(max-width:767px){.promotion-steps:before{left:28px}.promotion-step{grid-template-columns:56px 1fr;gap:18px}.promotion-no{width:56px;height:56px;font-size:25px}.more-grid{grid-template-columns:1fr}.more-card-wide{grid-column:auto}} /* ===== FINAL NAV / SUBPAGE HERO FIX ===== */ .nav-shell, .nav-shell:not(.scrolled){ background:transparent!important; border-bottom:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .nav-shell.scrolled{ background:rgba(5,5,5,.78)!important; border-bottom:1px solid rgba(255,255,255,.08)!important; backdrop-filter:blur(22px) saturate(130%)!important; -webkit-backdrop-filter:blur(22px) saturate(130%)!important; box-shadow:0 12px 35px rgba(0,0,0,.16)!important; } .subhero{isolation:isolate} .subhero .hero-pack-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:auto;opacity:.95;mix-blend-mode:screen} .subhero:before{z-index:1} .subhero .subhero-grid{z-index:1} .subhero>.container,.subhero>.subhero-code{z-index:3!important} @media(max-width:1199px){ .nav-shell,.nav-shell:not(.scrolled){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .nav-shell.scrolled{background:rgba(5,5,5,.88)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important} } /* ===== Detail pages from Mehr ===== */ .detail-section{background:linear-gradient(180deg,#080808,#0b0b0b);min-height:55vh}.detail-copy{border-left:1px solid rgba(199,162,90,.24);padding-left:clamp(24px,4vw,55px)}.detail-copy>p{color:#99938a;font-size:14px;line-height:1.95;margin-bottom:20px}.detail-copy .lead-copy{font:500 clamp(1.35rem,2.3vw,2rem)/1.5 var(--serif);color:#ddd4c5}.detail-quote{margin:38px 0 0;padding:28px 32px;border:1px solid rgba(199,162,90,.25);background:rgba(199,162,90,.04);font:500 clamp(1.25rem,2.4vw,2rem)/1.45 var(--serif);color:var(--gold2)}.gallery-placeholder{aspect-ratio:16/10;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;background:radial-gradient(circle at 70% 35%,rgba(199,162,90,.12),transparent 28%),linear-gradient(145deg,#121212,#080808);display:grid;place-items:center}.gallery-placeholder:before{content:"LMA";font:400 clamp(5rem,12vw,10rem)/1 var(--display);color:rgba(255,255,255,.025)}.gallery-placeholder span{position:absolute;color:#777;font-size:9px;letter-spacing:.18em;text-transform:uppercase}@media(max-width:767px){.detail-copy{border-left:0;padding-left:0}} /* ===== FINAL PAGE NAVIGATION ===== */ .final-page-nav{margin-top:42px}.final-page-nav .btn{min-width:170px}@media(max-width:575px){.final-page-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}.final-page-nav .btn{min-width:0;width:100%;padding-left:12px;padding-right:12px}} /* ===== V13 GLOBAL MOBILE RESPONSIVE ===== */ @media(max-width:991px){ .container{max-width:100%;padding-left:22px;padding-right:22px} .nav-shell{padding:12px 0!important}.nav-shell.scrolled{padding:7px 0!important} .brand-icon{width:38px;height:38px}.brand b{font-size:14px}.brand small{font-size:6px} .navbar-toggler{padding:6px!important}.nav-link{padding:11px 10px!important} section.py-5{padding-top:3.25rem!important;padding-bottom:3.25rem!important} .stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card:nth-child(2){border-right:0}.stat-card{padding:26px 18px} .hero-emblem-wrap{border-left:0;padding-left:0;justify-content:flex-start;margin-top:28px} .history-sticky{position:static!important;top:auto!important} .manifesto-panel{min-height:520px}.manifesto-panel:before{width:580px;height:580px}.manifesto-panel:after{width:420px;height:420px} } @media(max-width:767px){ html{scroll-padding-top:78px}body{font-size:15px} .container{padding-left:18px;padding-right:18px} .cursor-glow{display:none}.page-noise{opacity:.025} .subhero{min-height:68svh!important;padding:120px 0 54px!important}.subhero-title{font-size:clamp(4.6rem,24vw,7.6rem)!important;line-height:.82!important}.subhero-lead{font-size:1rem!important;line-height:1.65!important;max-width:95%}.subhero-eyebrow{font-size:8px!important}.subhero-scroll{bottom:18px!important}.subhero .hero-pack-canvas{pointer-events:none!important} .hero-section{min-height:auto!important;padding:125px 0 75px!important}.hero-title{font-size:clamp(5rem,25vw,8.4rem)!important;margin:25px 0 20px}.hero-copy{font-size:.98rem;line-height:1.7}.hero-grid{background-size:48px 48px}.orb-1,.orb-2{display:none}.scroll-indicator,.hero-index{display:none} .display-heading{font-size:clamp(3rem,17vw,5.3rem)!important}.lead-copy{font-size:1.18rem!important}.text-muted-custom{font-size:.92rem!important;line-height:1.75!important} .stats-grid{grid-template-columns:1fr 1fr}.stat-card strong{font-size:48px}.stat-card{padding:22px 14px}.stat-card:nth-child(even){border-right:0} .code-card{min-height:0;padding:22px}.code-card .line{margin:22px 0}.code-card h3{font-size:18px} .manifesto-panel{min-height:440px;padding-left:18px!important;padding-right:18px!important}.manifesto-panel:before{width:440px;height:440px}.manifesto-panel:after{width:330px;height:330px}.manifesto-quote{font-size:clamp(1.75rem,9vw,3rem)!important} .rank-card{grid-template-columns:50px 1fr;gap:14px;padding:19px 5px}.rank-card>b{display:none}.rank-index{font-size:34px}.rank-card h3{font-size:20px}.rank-card p{font-size:.86rem} .timeline:before{left:18px}.timeline-item{grid-template-columns:38px 1fr!important;gap:14px!important}.timeline-dot{margin-left:9px!important} .oath-card{padding:25px 18px}.oath-lang{gap:12px;align-items:flex-start}.oath-lines p,.spanish-oath p{font-size:1.08rem!important;padding:12px 0}.ritual-heading{font-size:clamp(3.2rem,17vw,5rem)!important;margin-bottom:34px} .ascenso-steps:before{left:25px}.ascenso-step{grid-template-columns:52px 1fr;gap:15px}.ascenso-step>span{width:52px;height:52px;font-size:22px}.ascenso-step p{font-size:12px} .promotion-quote{padding:20px}.more-card{padding:26px 22px;min-height:225px}.more-card b{left:22px;bottom:22px} .detail-copy>p{font-size:13px;line-height:1.8}.detail-quote{padding:22px 18px} .footer,.site-footer{padding-left:0!important;padding-right:0!important} .final-page-nav{grid-template-columns:1fr!important}.final-page-nav .btn{width:100%!important} } @media(max-width:480px){ .container{padding-left:14px;padding-right:14px}.brand-icon{width:34px;height:34px}.brand b{font-size:12px}.brand small{display:none} .subhero{min-height:64svh!important;padding-top:108px!important}.subhero-title{font-size:clamp(4rem,23vw,6.2rem)!important} .stats-grid{grid-template-columns:1fr}.stat-card{border-right:0!important}.stat-card:not(:last-child){border-bottom:1px solid var(--line)} .marquee-group span{font-size:27px}.btn{padding:13px 16px;font-size:9px} .promotion-step{grid-template-columns:46px 1fr}.promotion-no{width:46px;height:46px;font-size:21px}.promotion-steps:before{left:23px} } /* ===== V14 GLOBAL WIDTH / MOBILE CONTAINMENT ===== */ html,body{width:100%;max-width:100%;overflow-x:hidden!important} body>main,main,main>section,section,nav,footer,.footer,.site-footer{max-width:100%} .container,.container-fluid{min-width:0} img,svg,canvas,video{max-width:100%} .row>*{min-width:0} @media(max-width:991.98px){ .container,.container-fluid{width:100%!important;max-width:100%!important;padding-left:16px!important;padding-right:16px!important} .row{--bs-gutter-x:1.15rem} .navbar .container-fluid{padding-left:14px!important;padding-right:14px!important} .navbar-collapse{max-width:100%;overflow-x:hidden} .subhero,.hero-section,.detail-section,.more-hub,.section-dark,.section-history,.section-code{width:100%;max-width:100%;overflow:hidden} .subhero-title,.display-heading,.hero-title{max-width:100%;overflow-wrap:normal;word-break:normal} } @media(max-width:575.98px){ .container,.container-fluid{padding-left:12px!important;padding-right:12px!important} .row{--bs-gutter-x:.8rem} .navbar-brand{min-width:0}.brand{max-width:calc(100vw - 90px)} } /* V15 local image assets */ .hero-photo,.subhero-photo{background-image:url("../../uploads/lma-images/header.png")!important} .cinema-one{background-image:url("../../uploads/lma-images/header.png")!important} .cinema-two{background-image:url("../../uploads/lma-images/1.png")!important} .cinema-three{background-image:url("../../uploads/lma-images/2.png")!important} .cinema-four{background-image:url("../../uploads/lma-images/3.png")!important;background-position:center 46%} .gallery-image-card{position:relative;min-height:clamp(260px,32vw,480px);overflow:hidden;border:1px solid rgba(199,162,90,.16);background:#0c0c0c center/cover no-repeat;box-shadow:0 18px 50px rgba(0,0,0,.28)} .gallery-image-card:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.76),rgba(0,0,0,.08) 60%);transition:.35s} .gallery-image-card:hover:before{background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.02) 60%)} .gallery-image-card span{position:absolute;left:18px;bottom:15px;z-index:2;font-size:9px;letter-spacing:.15em;color:#d8c79d;text-transform:uppercase} .gallery-image-4{background-image:url("../../uploads/lma-images/4.png")} .gallery-image-5{background-image:url("../../uploads/lma-images/5.png")} .gallery-image-6{background-image:url("../../uploads/lma-images/6.png")} .gallery-image-7{background-image:url("../../uploads/lma-images/7.png")} .gallery-image-8{background-image:url("../../uploads/lma-images/8.png")} .gallery-image-9{background-image:url("../../uploads/lma-images/9.png")} .permission-mode-row{display:grid;grid-template-columns:140px 1fr;gap:8px;align-items:start;margin-top:8px}.permission-mode-row select{min-height:38px}.permission-multi{min-height:128px!important;padding:6px!important}.permission-multi option{padding:6px 7px;border-bottom:1px solid rgba(255,255,255,.035)} @media(max-width:767px){.permission-mode-row{grid-template-columns:1fr}.gallery-image-card{min-height:260px}} /* V16 Galerie: groß/klein im Wechsel + sanfter Hover-Zoom */ .gallery-image-card{min-height:clamp(300px,36vw,540px);background:#0b0b0b;isolation:isolate} .gallery-image-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .8s cubic-bezier(.2,.7,.2,1);will-change:transform} .gallery-image-card:hover img{transform:scale(1.075)} .gallery-image-card:before{z-index:1;pointer-events:none}.gallery-image-card span{z-index:2} @media(max-width:767px){.gallery-image-card{min-height:300px}.gallery-image-card:hover img{transform:scale(1.04)}} /* V16 Admin / Sichtbarkeitsgruppen */ .permission-multi{width:100%;min-height:96px;background:#0e0e0e;color:#ddd;border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:7px} .admin-object-selected{outline:1px solid rgba(199,162,90,.5);background:rgba(199,162,90,.09)!important} /* V17 gallery: one large + one compact small image, alternating */ .lma-gallery-stack{display:grid;gap:16px} .lma-gallery-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:16px;align-items:start} .lma-gallery-pair.reverse{grid-template-columns:minmax(220px,1fr) minmax(0,2fr)} .lma-gallery-item{position:relative;overflow:hidden;border:1px solid rgba(199,162,90,.16);background:#0b0b0b;box-shadow:0 18px 50px rgba(0,0,0,.28);isolation:isolate} .lma-gallery-big{height:clamp(360px,42vw,620px)} .lma-gallery-small{height:clamp(120px,14vw,205px)} .lma-gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .9s cubic-bezier(.2,.72,.2,1);will-change:transform} .lma-gallery-item:hover img{transform:scale(1.085)} .lma-gallery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.03) 58%);pointer-events:none} .lma-gallery-item span{position:absolute;left:16px;bottom:13px;z-index:2;font-size:9px;letter-spacing:.15em;color:#d8c79d;text-transform:uppercase} @media(max-width:767px){.lma-gallery-pair,.lma-gallery-pair.reverse{grid-template-columns:1fr}.lma-gallery-big{height:58vw;min-height:260px}.lma-gallery-small{height:30vw;min-height:145px}.lma-gallery-item:hover img{transform:scale(1.045)}} /* ===== LA MANADA · CONSENT V35 ===== */ .lma-consent{position:fixed;left:18px;right:18px;bottom:18px;z-index:100000;display:none;justify-content:center;pointer-events:none} .lma-consent.show{display:flex} .lma-consent-card{width:min(920px,100%);pointer-events:auto;padding:20px 22px;border:1px solid rgba(199,162,90,.28);border-radius:16px;background:rgba(9,9,9,.97);backdrop-filter:blur(18px);box-shadow:0 28px 80px rgba(0,0,0,.68);color:#d8d2c7} .lma-consent-head{display:flex;gap:15px;align-items:flex-start} .lma-consent-symbol{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:1px solid rgba(199,162,90,.3);border-radius:10px;color:#d6b56e;font-size:20px} .lma-consent-kicker{font-size:8px;letter-spacing:.17em;color:#a68a52;text-transform:uppercase} .lma-consent-title{margin:5px 0 7px;font-family:var(--serif,Georgia,serif);font-size:22px;color:#eee4d2} .lma-consent-text{margin:0;color:#8c8880;font-size:10px;line-height:1.65} .lma-consent-details{display:none;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)} .lma-consent.details .lma-consent-details{display:block} .lma-consent-row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:8px 0} .lma-consent-row strong{display:block;color:#d6c6a8;font-size:9px} .lma-consent-row span{display:block;color:#73706a;font-size:8px;margin-top:3px} .lma-consent-badge{flex:0 0 auto;border:1px solid rgba(199,162,90,.2);border-radius:999px;padding:5px 8px;color:#aa9364;font-size:7px} .lma-consent-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:15px} .lma-consent-actions button{padding:10px 14px;border-radius:8px;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .lma-consent-settings,.lma-consent-deny{border:1px solid rgba(255,255,255,.09);background:#111;color:#aaa} .lma-consent-accept{border:1px solid rgba(199,162,90,.4);background:linear-gradient(135deg,#d4b066,#a17a35);color:#0b0b0b} @media(max-width:700px){ .lma-consent{left:10px;right:10px;bottom:10px} .lma-consent-card{padding:16px 14px} .lma-consent-head{gap:10px} .lma-consent-symbol{width:38px;height:38px;flex-basis:38px} .lma-consent-title{font-size:19px} .lma-consent-actions{display:grid;grid-template-columns:1fr} .lma-consent-actions button{width:100%} } /* V64 — final mobile polish */ @media (max-width:1199.98px){ .navbar-collapse{width:100%!important} .navbar-collapse .navbar-nav{width:100%!important;align-items:stretch!important;margin-left:0!important} .navbar-collapse .nav-item{width:100%!important} .navbar-collapse .nav-link{display:block!important;width:100%!important;padding:12px 14px!important} .navbar-collapse .search-trigger{display:flex!important;width:100%!important;justify-content:center!important} } /* Startseite: mobile Kennzahlen mittig + stabiles Unendlichkeitszeichen */ .stat-infinity{font-family:Arial,Helvetica,sans-serif!important;font-weight:700!important;line-height:1!important} @media (max-width:575.98px){ .stats-grid{grid-template-columns:1fr!important} .stat-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;border-right:0!important;border-bottom:1px solid var(--line)!important;padding:28px 18px!important} .stat-card:last-child{border-bottom:0!important} .stat-card strong{display:inline-block!important;text-align:center!important} .stat-card sup{position:relative!important;top:-.55em!important;margin-left:2px!important} .stat-card span{width:100%!important;text-align:center!important;margin-top:10px!important} /* Historia wie der Aufstieg: klare Luft zwischen Zahl und Text */ .timeline:before{left:25px!important} .timeline-item{grid-template-columns:52px minmax(0,1fr)!important;gap:25px!important;padding-bottom:48px!important} .timeline-item>span{width:52px!important;height:52px!important} .timeline-item>div{padding-left:2px!important;min-width:0!important} } /* Galerie: große Desktop-Bilder wirklich 16:9 */ .lma-gallery-big{height:auto!important;aspect-ratio:16 / 9!important} .lma-gallery-big img{width:100%!important;height:100%!important;object-fit:cover!important} .mobile-gallery-carousel{display:none} @media (max-width:767.98px){ .lma-gallery-stack{display:none!important} .mobile-gallery-carousel{display:block!important;margin-top:24px;border:1px solid rgba(199,162,90,.18);background:#070707;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.36)} .mobile-gallery-carousel .carousel-item{aspect-ratio:16 / 9;background:#070707} .mobile-gallery-carousel .carousel-item img{display:block;width:100%;height:100%;object-fit:cover} .mobile-gallery-carousel .carousel-indicators{left:50%!important;right:auto!important;bottom:10px!important;transform:translateX(-50%);gap:5px} .mobile-gallery-carousel .carousel-indicators [data-bs-target]{width:26px;height:2px} .mobile-gallery-carousel .carousel-control-prev,.mobile-gallery-carousel .carousel-control-next{top:50%!important;bottom:auto!important;width:42px!important;height:42px!important;transform:translateY(-50%);border:0!important;background:rgba(0,0,0,.38)!important} .mobile-gallery-carousel .carousel-control-prev{left:8px!important;right:auto!important} .mobile-gallery-carousel .carousel-control-next{right:8px!important} } /* ===== V65: Cookie-Auswahl, mobile Startseite & Mitgliederbereich ===== */ .lma-consent-save{display:none;border:1px solid rgba(199,162,90,.32);background:#17130c;color:#d6b56e} .lma-consent.details .lma-consent-save{display:inline-block} .lma-consent-switch{position:relative;display:inline-flex;flex:0 0 46px;width:46px;height:25px;cursor:pointer} .lma-consent-switch input{position:absolute;opacity:0;pointer-events:none} .lma-consent-slider{position:absolute;inset:0;border-radius:999px;background:#242424;border:1px solid rgba(255,255,255,.12);transition:.2s} .lma-consent-slider:after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#777;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.35)} .lma-consent-switch input:checked + .lma-consent-slider{background:rgba(199,162,90,.22);border-color:rgba(199,162,90,.5)} .lma-consent-switch input:checked + .lma-consent-slider:after{transform:translateX(21px);background:var(--gold2)} .footer-sep{color:#49453f;margin:0 5px} .stat-value{display:flex;align-items:flex-start;justify-content:center;gap:3px;line-height:1} .stat-value sup{position:static!important;top:auto!important;margin:6px 0 0!important;line-height:1!important} @media(max-width:575.98px){ .manada-carousel .cinema-slide{min-height:390px!important;padding:24px 20px 66px!important} .manada-carousel .slide-content h3{font-size:3.05rem!important;line-height:.9!important} .manada-carousel .slide-content p{font-size:.86rem!important;line-height:1.55!important} .manada-carousel .slide-no{font-size:3.8rem!important} .stat-value strong{font-size:48px!important} .stat-value sup{font-size:17px!important;margin-top:4px!important} } .member-shell{min-height:100vh;background:radial-gradient(circle at 75% 10%,rgba(199,162,90,.11),transparent 28%),#080808;padding-top:105px} .member-hero{padding:70px 0 38px;border-bottom:1px solid var(--line)} .member-kicker{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold2);font-weight:700} .member-title{font:400 clamp(4.2rem,10vw,8rem)/.86 var(--display);margin:18px 0 16px}.member-title span{color:var(--gold2)} .member-intro{max-width:760px;color:#9c978f;line-height:1.8} .member-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:28px} .member-badge{border:1px solid rgba(199,162,90,.22);border-radius:999px;padding:9px 12px;font-size:8px;letter-spacing:.12em;color:#baa273;text-transform:uppercase} .member-logout{border:1px solid rgba(255,255,255,.1);background:#111;color:#aaa;border-radius:8px;padding:10px 14px;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .member-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding:34px 0 70px} .member-card{grid-column:span 6;border:1px solid rgba(199,162,90,.14);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));padding:24px;border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.2)} .member-card.full{grid-column:1/-1}.member-card.third{grid-column:span 4} .member-card h2{font:600 22px var(--serif);color:#e5dccb;margin:4px 0 18px}.member-card h3{font:600 15px var(--serif);color:#d8c08f;margin:0 0 10px} .member-label{font-size:8px;letter-spacing:.18em;color:#9b8252;text-transform:uppercase;font-weight:800} .member-list{display:grid;gap:8px}.member-pair{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid rgba(255,255,255,.055);padding:8px 0;font-size:12px}.member-pair span:first-child{color:#8c8780}.member-pair b{color:#ddd3c2;text-align:right} .member-route-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.member-route{padding:15px;border:1px solid rgba(199,162,90,.14);background:#0d0d0d;border-radius:10px}.member-route small{display:block;color:#6f6a62;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.member-route strong{display:block;margin-top:7px;color:#d9bc7a;font:600 20px var(--serif)} .calc-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.calc-tab{border:1px solid rgba(255,255,255,.09);background:#111;color:#888;border-radius:8px;padding:9px 12px;font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.calc-tab.active{border-color:rgba(199,162,90,.42);color:#e2c681;background:#18130b} .calc-pane{display:none}.calc-pane.active{display:block}.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.calc-field label{display:block;color:#777168;font-size:8px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}.calc-field input{width:100%;height:42px;background:#0b0b0b;border:1px solid rgba(255,255,255,.09);color:#eee;border-radius:8px;padding:0 11px;outline:none}.calc-field input:focus{border-color:rgba(199,162,90,.4)} .calc-result{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.calc-result>div{padding:15px;border:1px solid rgba(199,162,90,.16);border-radius:10px;background:#0b0b0b}.calc-result small{display:block;color:#666;font-size:8px;text-transform:uppercase;letter-spacing:.1em}.calc-result strong{display:block;color:#e0c17c;font:500 25px var(--display);margin-top:5px} .fish-table{display:grid;gap:6px}.fish-row{display:grid;grid-template-columns:minmax(120px,1.4fr) 90px 110px 120px;gap:8px;align-items:center;border-bottom:1px solid rgba(255,255,255,.055);padding:7px 0}.fish-row.head{color:#716c64;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.fish-row .fish-name{font-size:11px;color:#cfc5b5}.fish-row .fish-price{font-size:10px;color:#8f887c}.fish-row input{width:100%;height:34px;background:#0b0b0b;border:1px solid rgba(255,255,255,.08);color:#eee;border-radius:7px;padding:0 8px}.fish-row .fish-total{text-align:right;color:#d6b66f;font-size:11px}.fish-note{font-size:9px;color:#716c64;margin-top:12px;line-height:1.6} .member-login-wrap{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:110px 18px 50px;background:radial-gradient(circle at 50% 30%,rgba(199,162,90,.12),transparent 30%),#070707}.member-login-card{width:min(460px,100%);border:1px solid rgba(199,162,90,.24);background:rgba(8,8,8,.97);padding:30px;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.5)}.member-login-card h1{font:500 39px var(--display);margin:8px 0}.member-login-card p{color:#817c74;font-size:11px;line-height:1.7}.member-login-card label{display:block;font-size:8px;color:#777;letter-spacing:.1em;text-transform:uppercase;margin:11px 0 5px}.member-login-card input{width:100%;height:43px;background:#0d0d0d;border:1px solid rgba(255,255,255,.09);color:#eee;border-radius:8px;padding:0 11px}.member-login-card button[type=submit]{width:100%;margin-top:14px;height:43px;border:0;border-radius:8px;background:linear-gradient(135deg,#d1ad63,#9d7837);color:#0b0b0b;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.member-login-msg{min-height:18px;margin-top:10px!important;color:#b68b76!important} @media(max-width:991.98px){.member-card,.member-card.third{grid-column:1/-1}.member-route-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:575.98px){.member-shell{padding-top:72px}.member-hero{padding:46px 0 25px}.member-title{font-size:4rem}.member-grid{gap:12px;padding-top:22px}.member-card{padding:18px}.member-route-grid{grid-template-columns:1fr 1fr}.calc-grid,.calc-result{grid-template-columns:1fr}.fish-row{grid-template-columns:1fr 70px 75px}.fish-row .fish-total{grid-column:1/-1;text-align:left;font-size:10px;padding-bottom:4px}.fish-row.head{display:none}.member-pair{font-size:11px}} /* V67 Frontend-Editor */ #lmaFrontEditor{position:fixed;right:18px;bottom:18px;z-index:99998;display:flex;align-items:center;gap:7px;padding:8px;background:rgba(7,7,7,.96);border:1px solid rgba(199,162,90,.35);border-radius:12px;box-shadow:0 14px 45px rgba(0,0,0,.55);backdrop-filter:blur(16px)} #lmaFrontEditor button{border:1px solid rgba(199,162,90,.22);background:#111;color:#d9c18c;border-radius:8px;padding:8px 11px;font:700 9px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}#lmaFrontEditor button:hover{background:rgba(199,162,90,.12)} #lmaFrontEditor #lmaEditSave{background:linear-gradient(135deg,#d8ba76,#a88038);color:#080808;border:0}#lmaFrontEditor #lmaEditState{font:700 8px Inter,sans-serif;color:#6f6758;letter-spacing:.12em;padding:0 4px} #lmaEditorToast{position:absolute;right:0;bottom:calc(100% + 8px);min-width:220px;padding:9px 12px;border-radius:8px;background:#111;border:1px solid rgba(199,162,90,.25);color:#d5c39b;font:600 10px Inter,sans-serif;opacity:0;pointer-events:none;transform:translateY(5px);transition:.18s}#lmaEditorToast.show{opacity:1;transform:none}#lmaEditorToast.bad{color:#ef9a9a;border-color:rgba(220,90,90,.3)} body.lma-edit-mode{cursor:crosshair}body.lma-edit-mode .lma-edit-target{outline:1px dashed #d5b468!important;outline-offset:4px;cursor:text!important}body.lma-edit-mode img.lma-edit-target{cursor:pointer!important}body.lma-edit-mode [contenteditable=true]{min-width:8px} @media(max-width:700px){#lmaFrontEditor{left:8px;right:8px;bottom:8px;justify-content:center;flex-wrap:wrap}#lmaFrontEditor button{flex:1;min-width:100px}#lmaFrontEditor #lmaEditState{display:none}} /* V68 Mitglieder-Rechner + Baukasten */ .fish-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.fish-column{min-width:0}.fish-column .fish-row{grid-template-columns:minmax(90px,1.35fr) 80px 82px 95px}.fish-admin-wrap{margin-top:22px;border-top:1px solid rgba(199,162,90,.16);padding-top:16px}.fish-admin-toggle{border:1px solid rgba(199,162,90,.28);background:#15120c;color:#d9bd7c;border-radius:8px;padding:10px 13px;font-size:8px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.fish-admin-panel{margin-top:12px;padding:14px;border:1px solid rgba(199,162,90,.16);border-radius:10px;background:#0a0a0a}.fish-admin-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:10px}.fish-admin-head strong{font-size:10px;letter-spacing:.12em;color:#d6b66f}.fish-admin-head small{display:block;color:#6d6860;font-size:9px;margin-top:3px}.fish-admin-head button,.fish-admin-actions button{border:1px solid rgba(199,162,90,.3);background:#1a140b;color:#e0c17c;border-radius:7px;padding:8px 10px;font-size:8px;font-weight:800;text-transform:uppercase}.fish-admin-row{display:grid;grid-template-columns:32px minmax(120px,1fr) 110px 95px 112px;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}.fish-admin-row input,.fish-admin-row select{height:34px;background:#0d0d0d;border:1px solid rgba(255,255,255,.09);color:#ddd;border-radius:6px;padding:0 8px;font-size:10px}.fish-drag{color:#7e6b45;font:600 12px var(--serif);text-align:center}.fish-admin-move{display:flex;gap:4px}.fish-admin-move button{width:32px;height:32px;border:1px solid rgba(255,255,255,.08);background:#111;color:#bbb;border-radius:6px}.fish-admin-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.fish-admin-actions span{font-size:9px;color:#9e8a5c} @media(max-width:991.98px){.fish-columns{grid-template-columns:1fr;gap:22px}.fish-admin-row{grid-template-columns:26px 1fr 90px 80px 106px}} @media(max-width:575.98px){.fish-admin-row{grid-template-columns:24px 1fr 78px}.fish-admin-row select{grid-column:2}.fish-admin-move{grid-column:3;grid-row:1/3;align-self:center;flex-direction:column}.fish-admin-move button{width:30px;height:26px}.fish-admin-head{align-items:flex-start;flex-direction:column}} #lmaBuilderPanel{position:fixed;right:18px;bottom:78px;width:min(390px,calc(100vw - 36px));max-height:72vh;overflow:auto;background:#090909;border:1px solid rgba(199,162,90,.3);border-radius:14px;padding:14px;z-index:100003;box-shadow:0 24px 80px rgba(0,0,0,.55);color:#d6d0c5}#lmaBuilderPanel[hidden]{display:none!important}.lma-builder-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.lma-builder-head strong{font:600 16px var(--serif);color:#e0c17c}.lma-builder-head button,.lma-builder-actions button,.lma-section-tools button,.lma-custom-tools button{border:1px solid rgba(199,162,90,.2);background:#13100b;color:#cfb371;border-radius:6px;padding:7px 9px;font-size:8px;font-weight:800;text-transform:uppercase}.lma-builder-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.lma-builder-note{font-size:9px;line-height:1.55;color:#777168;margin-bottom:12px}.lma-builder-hidden{border-top:1px solid rgba(255,255,255,.06);padding-top:10px}.lma-builder-hidden h4{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8d774d}.lma-builder-hidden-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 0;font-size:9px;color:#999}.lma-section-managed,.lma-custom-block{position:relative}.lma-section-tools,.lma-custom-tools{display:none;position:absolute;right:10px;top:10px;z-index:40;gap:4px;padding:4px;background:rgba(5,5,5,.88);border:1px solid rgba(199,162,90,.25);border-radius:8px}.lma-builder-mode .lma-section-tools,.lma-builder-mode .lma-custom-tools{display:flex}.lma-builder-mode .lma-section-managed,.lma-builder-mode .lma-custom-block{outline:1px dashed rgba(199,162,90,.34);outline-offset:-2px}.lma-builder-zone{width:100%}.lma-custom-block{padding:50px max(24px,5vw);background:#090909;border-top:1px solid rgba(199,162,90,.12)}.lma-custom-inner{max-width:1200px;margin:auto}.lma-custom-block h2{font:500 clamp(2rem,5vw,4rem)/1 var(--display);color:#eee}.lma-custom-block p{color:#9a958d;line-height:1.8;max-width:850px}.lma-custom-block img,.lma-custom-block video,.lma-custom-block iframe{display:block;width:min(100%,1100px);margin:18px auto 0;aspect-ratio:16/9;object-fit:cover;border:0;border-radius:12px}.lma-builder-modal{position:fixed;inset:0;z-index:100004;display:grid;place-items:center;background:rgba(0,0,0,.76);padding:18px}.lma-builder-modal[hidden]{display:none!important}.lma-builder-form{width:min(560px,100%);background:#0a0a0a;border:1px solid rgba(199,162,90,.3);border-radius:14px;padding:18px}.lma-builder-form h3{font:600 19px var(--serif);color:#e0c17c}.lma-builder-form label{display:block;font-size:8px;color:#777;letter-spacing:.1em;text-transform:uppercase;margin:10px 0 4px}.lma-builder-form input,.lma-builder-form textarea,.lma-builder-form select{width:100%;background:#101010;border:1px solid rgba(255,255,255,.1);color:#eee;border-radius:7px;padding:9px}.lma-builder-form textarea{min-height:100px}.lma-builder-form .row-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:14px}.lma-builder-form button{border:1px solid rgba(199,162,90,.25);background:#18130b;color:#d9bd7c;border-radius:7px;padding:9px 12px;font-size:8px;font-weight:850;text-transform:uppercase} /* ===== V69: item-level admin editing ===== */ .lma-rank-tools{display:none;position:absolute;right:8px;top:8px;gap:5px;z-index:8}.rank-card{position:relative}.lma-rank-tools button,.lma-rank-add{border:1px solid rgba(199,162,90,.35);background:#100d08;color:#e0c17c;border-radius:7px;font:800 10px/1 Inter,sans-serif;min-width:30px;height:30px;padding:0 8px}.lma-builder-mode .lma-rank-tools{display:flex}.lma-rank-add{display:none;margin:14px 0 0 auto;height:36px;text-transform:uppercase;letter-spacing:.08em;font-size:8px}.lma-builder-mode .lma-rank-add{display:block}.lma-builder-mode .rank-card{outline:1px dashed rgba(199,162,90,.12);outline-offset:-1px}.lma-edit-mode .rank-index{cursor:not-allowed}.lma-edit-mode .rank-index:after{content:" AUTO";font:700 7px Inter,sans-serif;color:#806a3d;vertical-align:middle;letter-spacing:.08em} .fish-row.has-admin{grid-template-columns:minmax(120px,1.35fr) 90px 110px 120px 88px}.fish-column .fish-row.has-admin{grid-template-columns:minmax(90px,1.35fr) 74px 78px 86px 82px}.fish-inline-admin{display:flex;justify-content:flex-end;gap:4px}.fish-inline-admin button{width:24px;height:27px;border:1px solid rgba(199,162,90,.22);background:#12100c;color:#d5b66e;border-radius:5px;font-size:11px;line-height:1}.fish-admin-col{text-align:right}.fish-inline-admin button:hover{border-color:rgba(199,162,90,.55);background:#1b160d} @media(max-width:575.98px){.fish-row.has-admin,.fish-column .fish-row.has-admin{grid-template-columns:1fr 70px 75px}.fish-row.has-admin .fish-total{grid-column:1/2}.fish-inline-admin{grid-column:2/-1;justify-content:flex-end;padding-bottom:4px}.lma-rank-tools{right:4px;top:4px}.lma-rank-tools button{min-width:27px;height:27px;padding:0 6px}} .lma-edit-mode .lma-rank-tools{display:flex}.lma-edit-mode .lma-rank-add{display:block} /* V70: Postals im Mitgliederbereich öffnen direkt die Mapa */ .member-route-map{cursor:pointer;position:relative;transition:border-color .18s ease,transform .18s ease,background .18s ease}.member-route-map:hover{border-color:rgba(199,162,90,.42);background:#111;transform:translateY(-1px)}.member-route-open{display:block;margin-top:8px;color:#777;font-size:7px;letter-spacing:.12em;text-transform:uppercase}.member-route-map:hover .member-route-open{color:#c7a25a}.lma-edit-mode .member-route-map{cursor:text} /* V71: exakter interner Suchtreffer */ .lma-search-target{outline:1px solid rgba(199,162,90,.78)!important;background:rgba(199,162,90,.09)!important;box-shadow:0 0 0 4px rgba(199,162,90,.06)!important;transition:background .35s,outline-color .35s,box-shadow .35s} /* V72 Mobile Mitglieder-Fix + erweiterter CMS-Baukasten */ .fish-result{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:575.98px){ .member-shell{width:100%;max-width:100vw;overflow-x:hidden} .member-shell .container{width:100%!important;max-width:100%!important;min-width:0!important} .member-grid,.member-card,.fish-columns,.fish-column,.fish-table,.calc-pane{width:100%;max-width:100%;min-width:0} .fish-column .fish-row:not(.has-admin){grid-template-columns:minmax(0,1fr) 78px 82px!important;gap:8px!important;width:100%!important} .fish-column .fish-row:not(.has-admin) .fish-total{grid-column:1/-1!important;text-align:left!important;padding:2px 0 9px!important} .fish-result{grid-template-columns:1fr!important} } /* Rich editor / block styles */ .lma-format-tools{display:none;align-items:center;gap:4px;border-left:1px solid rgba(199,162,90,.2);padding-left:7px} .lma-edit-mode #lmaFrontEditor .lma-format-tools{display:flex} #lmaFrontEditor .lma-format-tools button{min-width:31px;padding:8px 7px;font-family:Georgia,serif} #lmaFrontEditor .lma-format-tools button[data-fmt="bold"]{font-weight:900} #lmaFrontEditor .lma-format-tools button[data-fmt="italic"]{font-style:italic} #lmaFrontEditor .lma-format-tools button[data-fmt="underline"]{text-decoration:underline} #lmaFrontEditor .lma-format-tools button[data-color="primary"]{color:var(--gold2)} #lmaFrontEditor .lma-format-tools button[data-color="money"]{color:#d6b66f} #lmaFrontEditor .lma-format-tools button[data-color="white"]{color:#fff} .lma-builder-form .lma-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .lma-builder-form .lma-checks{display:flex;flex-wrap:wrap;gap:12px;padding:8px 0} .lma-builder-form .lma-checks label{display:flex;align-items:center;gap:6px;margin:0;text-transform:none;letter-spacing:0;font-size:10px;color:#b6afa3} .lma-builder-form .lma-checks input{width:auto;height:auto} .lma-builder-form input[type=color]{height:40px;padding:4px} .lma-builder-form .lma-help{font-size:8px;color:#6f6a62;line-height:1.5;margin-top:4px} .lma-custom-block.lma-width-compact .lma-custom-inner{max-width:760px} .lma-custom-block.lma-width-wide .lma-custom-inner{max-width:1200px} .lma-custom-block.lma-width-full .lma-custom-inner{max-width:none} .lma-custom-block.lma-align-center{text-align:center}.lma-custom-block.lma-align-center p{margin-left:auto;margin-right:auto} .lma-custom-block.lma-align-right{text-align:right}.lma-custom-block.lma-align-right p{margin-left:auto} .lma-custom-block.lma-media-small img,.lma-custom-block.lma-media-small video,.lma-custom-block.lma-media-small iframe,.lma-custom-block.lma-media-small .lma-block-slideshow{width:min(100%,620px)} .lma-custom-block.lma-media-large img,.lma-custom-block.lma-media-large video,.lma-custom-block.lma-media-large iframe,.lma-custom-block.lma-media-large .lma-block-slideshow{width:min(100%,1100px)} .lma-custom-block.lma-media-full img,.lma-custom-block.lma-media-full video,.lma-custom-block.lma-media-full iframe,.lma-custom-block.lma-media-full .lma-block-slideshow{width:100%;max-width:none;border-radius:0} .lma-custom-block.lma-bg-gold{background:radial-gradient(circle at 50% 20%,rgba(199,162,90,.12),transparent 50%),#090909} .lma-custom-block.lma-bg-transparent{background:transparent} .lma-block-slideshow{position:relative;margin:18px auto 0;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#050505} .lma-block-slideshow img{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;border-radius:0!important;opacity:0;transition:opacity .65s ease;object-fit:cover} .lma-block-slideshow img.active{opacity:1} @media(max-width:700px){ .lma-format-tools{width:100%;justify-content:center;border-left:0;border-top:1px solid rgba(199,162,90,.15);padding:6px 0 0} .lma-builder-form .lma-form-grid{grid-template-columns:1fr} } .lma-builder-actions{grid-template-columns:repeat(4,1fr)} @media(max-width:575.98px){.lma-builder-actions{grid-template-columns:repeat(2,1fr)}} /* V73 · CMS PRO */ body.lma-builder-mode [data-lma-cms-id]{transition:outline .12s ease,box-shadow .12s ease} body.lma-builder-mode [data-lma-cms-id]:hover{outline:1px dashed rgba(214,182,111,.55);outline-offset:2px;cursor:pointer} body.lma-builder-mode .lma-pro-selected{outline:2px solid #d6b66f!important;outline-offset:3px!important;box-shadow:0 0 0 4px rgba(214,182,111,.10)!important} #lmaBuilderPanel{width:min(460px,calc(100vw - 36px));max-height:82vh} #lmaProInspector{border-top:1px solid rgba(255,255,255,.07);margin-top:14px;padding-top:14px} .lma-pro-empty{display:grid;gap:4px;padding:16px;border:1px dashed rgba(199,162,90,.2);border-radius:10px}.lma-pro-empty strong{font:600 14px var(--serif);color:#d8bd82}.lma-pro-empty span{font-size:9px;color:#777} .lma-pro-title{display:grid;gap:4px;margin-bottom:10px}.lma-pro-title span{font:800 7px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#806d45}.lma-pro-title strong{font:600 15px var(--serif);color:#eee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lma-pro-actions,.lma-pro-presets,.lma-pro-add-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0 12px}.lma-pro-actions button,.lma-pro-presets button,.lma-pro-add-grid button,.lma-pro-footer button{border:1px solid rgba(199,162,90,.22);background:#111;color:#d8bd82;border-radius:7px;padding:8px;font:800 8px Inter,sans-serif;text-transform:uppercase;letter-spacing:.04em} #lmaProInspector details{border-top:1px solid rgba(255,255,255,.06);padding:9px 0}#lmaProInspector summary{cursor:pointer;font:800 8px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#a99061;margin-bottom:8px} .lma-pro-fields,.lma-pro-grid{display:grid;gap:8px}.lma-pro-grid{grid-template-columns:1fr 1fr}.lma-pro-fields label,.lma-pro-grid label,#lmaProInspector>details>label{display:grid;gap:4px;font:700 7px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6f6a62} #lmaProInspector input,#lmaProInspector textarea,#lmaProInspector select{width:100%;border:1px solid rgba(255,255,255,.1);background:#101010;color:#eee;border-radius:7px;padding:8px;font:400 10px Inter,sans-serif;letter-spacing:0;text-transform:none}#lmaProInspector textarea{min-height:82px;resize:vertical}#lmaProInspector input[type=color]{padding:3px;height:36px} .lma-pro-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:7px!important}.lma-pro-check input{width:auto!important} .lma-pro-footer{display:grid;grid-template-columns:1fr 2fr;gap:7px;position:sticky;bottom:-14px;background:linear-gradient(transparent,#090909 24%);padding:18px 0 2px}.lma-pro-footer .primary{background:linear-gradient(135deg,#d8ba76,#a88038);color:#080808;border:0}.lma-pro-footer .danger{color:#d98787;border-color:rgba(210,80,80,.25)} .lma-pro-hidden-wrap{border-top:1px solid rgba(255,255,255,.07);margin-top:14px;padding-top:10px}.lma-pro-hidden-wrap h4{font:800 8px Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#806d45} .lma-modal-x{position:absolute!important;right:12px;top:12px;width:34px!important;height:34px;padding:0!important;border-radius:50%!important;font-size:20px!important;line-height:1!important;z-index:5}.lma-builder-form{position:relative;max-height:min(86vh,780px);overflow:auto;padding-top:22px} #lmaProToast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);z-index:100020;background:#0c0c0c;border:1px solid rgba(199,162,90,.35);color:#dcc386;border-radius:9px;padding:10px 14px;font:700 9px Inter,sans-serif;opacity:0;pointer-events:none;transition:.2s}#lmaProToast.show{opacity:1;transform:translate(-50%,0)}#lmaProToast.bad{border-color:rgba(210,80,80,.5);color:#e49a9a} .lma-pro-added{position:relative}.lma-pro-added img,.lma-pro-added video{display:block;max-width:100%;height:auto}.lma-pro-slideshow{position:relative;aspect-ratio:16/9;overflow:hidden}.lma-pro-slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}.lma-pro-slideshow img.active{opacity:1} @media(max-width:700px){#lmaBuilderPanel{left:8px;right:8px;bottom:108px;width:auto;max-height:72vh}.lma-pro-grid{grid-template-columns:1fr}.lma-pro-actions,.lma-pro-presets,.lma-pro-add-grid{grid-template-columns:repeat(2,1fr)}} /* V74 CMS dynamic page blocks */ .cms-dyn-block{margin:20px 0}.cms-dyn-block img,.cms-dyn-block video{max-width:100%;height:auto}.lma-cms-footer-custom{margin-bottom:10px;color:#bda978} /* V76 · Admin backend shortcut */ .member-bar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .member-backend-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;border:1px solid rgba(199,162,90,.55);color:var(--gold2);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;background:rgba(199,162,90,.08)} .member-backend-link:hover{background:var(--gold2);color:#080808} @media(max-width:767px){.member-bar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.member-backend-link,.member-logout{width:100%}} /* V77: Zahlenfelder ohne Browser-Stepper */ input[type="number"]{-moz-appearance:textfield;appearance:textfield} input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} @media(max-width:767.98px){.lma-cms-columns{grid-template-columns:1fr!important}} /* V80 · Front-End CMS live inspector */ .lma-pro-live{display:flex;flex-direction:column;gap:3px;padding:10px 12px;margin:0 0 12px;border:1px solid rgba(199,162,90,.28);background:rgba(199,162,90,.07);border-radius:10px}.lma-pro-live b{font-size:11px;letter-spacing:.14em;color:var(--gold2,#d6b66f)}.lma-pro-live span{font-size:11px;line-height:1.45;opacity:.72}.lma-pro-color-row{display:flex;align-items:center;gap:8px}.lma-pro-color-row input[type=color]{flex:1}.lma-pro-color-row button{white-space:nowrap} /* V100 CMS Content Engine */ .lma-cms-page .lma-section{position:relative;isolation:isolate} .lma-cms-page .lma-addon{position:relative;min-width:0} .lma-cms-page .lma-addon+.lma-addon{margin-top:1rem} .lma-cms-page .lma-addon img,.lma-cms-page .lma-addon video{max-width:100%;height:auto} /* V104 · Content Engine responsive visibility + animation runtime */ @media(min-width:992px){.lma-hide-desktop{display:none!important}} @media(min-width:768px) and (max-width:991.98px){.lma-hide-tablet{display:none!important}} @media(max-width:767.98px){.lma-hide-mobile{display:none!important}} .lma-anim{animation-duration:var(--lma-anim-duration,600ms);animation-delay:var(--lma-anim-delay,0ms);animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.8,.2,1)} .lma-anim-fade-in{animation-name:lmaFadeIn}.lma-anim-fade-up{animation-name:lmaFadeUp}.lma-anim-zoom-in{animation-name:lmaZoomIn}.lma-anim-slide-left{animation-name:lmaSlideLeft}.lma-anim-slide-right{animation-name:lmaSlideRight} @keyframes lmaFadeIn{from{opacity:0}to{opacity:1}}@keyframes lmaFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes lmaZoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}@keyframes lmaSlideLeft{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}@keyframes lmaSlideRight{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.lma-anim{animation:none!important}} /* V106 · Frontend Theme Engine */ html[data-site-theme="control"]{color-scheme:dark} html[data-site-theme="vice"]{color-scheme:dark;--lma-primary:#ff4fa3;--lma-secondary:#8d6bff;--lma-money:#43f0e2;--lma-white:#fff7fb;--lma-muted:#b9a9c4;--lma-black:#090716} html[data-site-theme="vice"] body,body[data-site-theme="vice"]{background:radial-gradient(circle at 82% 8%,rgba(255,79,163,.18),transparent 28%),radial-gradient(circle at 12% 30%,rgba(55,235,224,.11),transparent 30%),linear-gradient(180deg,#12091e 0%,#090714 38%,#070710 100%);color:#fff7fb} body[data-site-theme="vice"]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 72%)} body[data-site-theme="vice"] #mainNav,body[data-site-theme="vice"] .nav-shell{background:linear-gradient(90deg,rgba(11,7,24,.9),rgba(31,10,42,.78),rgba(9,19,32,.86))!important;border-bottom:1px solid rgba(255,86,177,.26)!important;box-shadow:0 14px 45px rgba(0,0,0,.28),0 1px 0 rgba(57,238,224,.08);backdrop-filter:blur(22px) saturate(145%)} body[data-site-theme="vice"] #mainNav .brand b,body[data-site-theme="vice"] #mainNav .navbar-brand b{color:#fff!important;text-shadow:0 0 24px rgba(255,75,170,.35)} body[data-site-theme="vice"] #mainNav .brand small,body[data-site-theme="vice"] #mainNav .navbar-brand small{color:#43f0e2!important} body[data-site-theme="vice"] .nav-link{color:#e9ddec!important}body[data-site-theme="vice"] .nav-link:hover,body[data-site-theme="vice"] .nav-link.active{color:#fff!important;text-shadow:0 0 18px rgba(255,79,163,.7)} body[data-site-theme="vice"] .btn-gold,body[data-site-theme="vice"] .btn-primary,body[data-site-theme="vice"] .primary{background:linear-gradient(135deg,#ff4fa3,#9a5cff)!important;border-color:rgba(255,255,255,.14)!important;color:white!important;box-shadow:0 10px 30px rgba(255,79,163,.2)} body[data-site-theme="vice"] .btn-gold:hover,body[data-site-theme="vice"] .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(255,79,163,.3),0 0 28px rgba(67,240,226,.08)} body[data-site-theme="vice"] .card,body[data-site-theme="vice"] .glass-card,body[data-site-theme="vice"] .panel,body[data-site-theme="vice"] .cms-dyn-block{border-color:rgba(255,255,255,.1)!important;background:linear-gradient(145deg,rgba(32,17,47,.76),rgba(9,13,28,.78))!important;box-shadow:0 22px 55px rgba(0,0,0,.25)} body[data-site-theme="vice"] h1,body[data-site-theme="vice"] h2,body[data-site-theme="vice"] h3{color:#fff7fb;text-shadow:0 0 30px rgba(255,79,163,.08)} body[data-site-theme="vice"] a{--bs-link-color-rgb:67,240,226}body[data-site-theme="vice"] .text-gold,body[data-site-theme="vice"] .gold,body[data-site-theme="vice"] .money{color:#43f0e2!important} body[data-site-theme="vice"] footer,body[data-site-theme="vice"] .footer{background:linear-gradient(180deg,rgba(8,7,18,.7),#05050c)!important;border-top:1px solid rgba(67,240,226,.13)!important} body[data-site-theme="vice"] input,body[data-site-theme="vice"] select,body[data-site-theme="vice"] textarea{background:#100d1d;color:#fff;border-color:rgba(255,255,255,.12)} body[data-site-theme="vice"] ::selection{background:#ff4fa3;color:#fff} /* V107 · Vice Sunset COMPLETE frontend skin */ body[data-site-theme="vice"]{--gold:#ff4fa3;--gold2:#58f5ea;--text:#fff6fb;--muted:#c1adc7;--line:rgba(255,112,190,.18);--bg:#080612;--bg2:#10091b;--panel:#171027;--serif:'Cinzel',serif;--display:'Bebas Neue',sans-serif;background:radial-gradient(circle at 84% 5%,rgba(255,74,166,.24),transparent 27%),radial-gradient(circle at 9% 45%,rgba(45,238,230,.12),transparent 31%),linear-gradient(180deg,#160923 0,#090714 38%,#050811 100%)!important;color:var(--text)!important} body[data-site-theme="vice"] .page-noise{opacity:.055;mix-blend-mode:screen}body[data-site-theme="vice"] .cursor-glow{background:radial-gradient(circle,rgba(255,69,166,.14),rgba(53,239,231,.05) 36%,transparent 67%)} body[data-site-theme="vice"] .loading-screen{background:radial-gradient(circle at 50% 45%,#30113a,#080612 55%)}body[data-site-theme="vice"] .loader-mark svg{stroke:#55f5e9;filter:drop-shadow(0 0 16px #ff4fa388)}body[data-site-theme="vice"] .loading-screen:after{background:linear-gradient(90deg,#ff4fa3,#a75cff,#55f5e9);box-shadow:0 0 18px #ff4fa3} body[data-site-theme="vice"] .hero-section,body[data-site-theme="vice"] .subhero{background:radial-gradient(circle at 75% 28%,rgba(255,117,93,.30),transparent 16%),radial-gradient(circle at 67% 34%,rgba(255,62,167,.32),transparent 30%),radial-gradient(circle at 20% 72%,rgba(42,235,226,.13),transparent 32%),linear-gradient(145deg,#190b2b,#35123e 43%,#092a3a 78%,#060a14)!important} body[data-site-theme="vice"] .hero-section:before,body[data-site-theme="vice"] .subhero:before{background:linear-gradient(90deg,rgba(6,5,17,.38),rgba(20,6,30,.05)),linear-gradient(to top,#080612,transparent 36%)!important} body[data-site-theme="vice"] .hero-grid{opacity:.2;background-image:linear-gradient(rgba(83,244,234,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,80,174,.16) 1px,transparent 1px);animation:viceFrontGrid 18s linear infinite} body[data-site-theme="vice"] .hero-orb{border-color:rgba(85,245,233,.20);box-shadow:0 0 50px rgba(255,79,163,.05)} body[data-site-theme="vice"] .hero-kicker,body[data-site-theme="vice"] .section-label,body[data-site-theme="vice"] .subhero-eyebrow{color:#5ff8ed!important;text-shadow:0 0 16px rgba(85,245,233,.24)} body[data-site-theme="vice"] .hero-kicker span,body[data-site-theme="vice"] .signature-line span{background:linear-gradient(90deg,#ff4fa3,#55f5e9)!important;box-shadow:0 0 12px #ff4fa366} body[data-site-theme="vice"] .hero-title,body[data-site-theme="vice"] .subhero-title,body[data-site-theme="vice"] .display-heading{color:#fff6fb!important;text-shadow:0 5px 34px rgba(255,65,164,.18)} body[data-site-theme="vice"] .hero-title em,body[data-site-theme="vice"] .display-heading span,body[data-site-theme="vice"] .manifesto-quote em{color:transparent!important;-webkit-text-stroke:1px #59f5ea!important;text-shadow:0 0 30px rgba(89,245,234,.22)!important} body[data-site-theme="vice"] p,body[data-site-theme="vice"] .hero-copy,body[data-site-theme="vice"] .subhero-lead,body[data-site-theme="vice"] .lead-copy,body[data-site-theme="vice"] .text-muted-custom,body[data-site-theme="vice"] .code-card p,body[data-site-theme="vice"] .rank-card p,body[data-site-theme="vice"] .slide-content p{color:#cbbbd0!important} body[data-site-theme="vice"] strong,body[data-site-theme="vice"] b{color:#fff9fd}body[data-site-theme="vice"] small,body[data-site-theme="vice"] .tiny-note{color:#a997b1} body[data-site-theme="vice"] .section-dark,body[data-site-theme="vice"] .section-code,body[data-site-theme="vice"] .section-history,body[data-site-theme="vice"] .detail-section,body[data-site-theme="vice"] .more-hub{background:linear-gradient(180deg,rgba(15,8,27,.96),rgba(6,8,18,.98))!important} body[data-site-theme="vice"] .section-dark:nth-of-type(even),body[data-site-theme="vice"] .detail-section:nth-of-type(even){background:radial-gradient(circle at 85% 20%,rgba(255,65,164,.09),transparent 30%),linear-gradient(180deg,#0a0918,#090611)!important} body[data-site-theme="vice"] .stats-grid,body[data-site-theme="vice"] .rank-stack,body[data-site-theme="vice"] .rank-card,body[data-site-theme="vice"] .stat-card{border-color:rgba(255,105,187,.17)!important} body[data-site-theme="vice"] .stat-card strong,body[data-site-theme="vice"] .stat-card sup,body[data-site-theme="vice"] .rank-card small,body[data-site-theme="vice"] .code-card .num{color:#59f5ea!important;text-shadow:0 0 20px rgba(89,245,234,.16)} body[data-site-theme="vice"] .rank-card:hover{background:linear-gradient(90deg,rgba(255,79,163,.12),rgba(83,244,234,.035),transparent)!important} body[data-site-theme="vice"] .code-card{border-color:rgba(255,98,183,.16)!important;background:radial-gradient(circle at 90% 0,rgba(255,79,163,.10),transparent 30%),linear-gradient(145deg,rgba(31,13,44,.86),rgba(7,16,28,.82))!important;box-shadow:0 20px 50px rgba(0,0,0,.22)} body[data-site-theme="vice"] .code-card:before{background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(85,245,233,.16),rgba(255,79,163,.08),transparent 38%)}body[data-site-theme="vice"] .code-card:hover{border-color:rgba(85,245,233,.35)!important;box-shadow:0 25px 65px rgba(0,0,0,.34),0 0 28px rgba(255,79,163,.09)} body[data-site-theme="vice"] .manifesto-panel{background:radial-gradient(circle at 50% 45%,rgba(255,72,167,.19),transparent 25%),radial-gradient(circle at 62% 55%,rgba(76,244,234,.10),transparent 32%),linear-gradient(130deg,#12091f,#2a0d35 50%,#071822)!important}body[data-site-theme="vice"] .manifesto-panel:before,body[data-site-theme="vice"] .manifesto-panel:after{border-color:rgba(88,245,234,.14)!important} body[data-site-theme="vice"] .marquee-section{background:linear-gradient(90deg,#ff4fa3,#a75cff 48%,#55f5e9)!important;color:#090612!important;box-shadow:0 0 36px rgba(255,79,163,.20)} body[data-site-theme="vice"] .timeline:before{background:linear-gradient(#ff4fa3,#55f5e9,rgba(255,255,255,.04))!important}body[data-site-theme="vice"] .timeline-item>span{border-color:rgba(85,245,233,.35)!important;background:#0d0a18!important;color:#59f5ea!important;box-shadow:0 0 22px rgba(85,245,233,.06)} body[data-site-theme="vice"] .btn,body[data-site-theme="vice"] button{transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}body[data-site-theme="vice"] .btn-clean{border-color:rgba(85,245,233,.28)!important;color:#eafefd!important;background:rgba(25,18,43,.34)!important}body[data-site-theme="vice"] .btn-clean:hover{border-color:#59f5ea!important;box-shadow:0 0 26px rgba(85,245,233,.14)} body[data-site-theme="vice"] .search-trigger{border-color:rgba(255,79,163,.25)!important;color:#f6e8f2!important}body[data-site-theme="vice"] .search-trigger:hover{border-color:#59f5ea!important;box-shadow:0 0 22px rgba(85,245,233,.10)} body[data-site-theme="vice"] .cinema-slide:after,body[data-site-theme="vice"] .hero-photo:after,body[data-site-theme="vice"] .subhero-photo:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,48,158,.10),transparent 42%,rgba(42,235,226,.08));mix-blend-mode:screen} body[data-site-theme="vice"] .carousel-indicators .active{background:#59f5ea!important;box-shadow:0 0 14px #59f5ea}body[data-site-theme="vice"] .carousel-control-prev:hover,body[data-site-theme="vice"] .carousel-control-next:hover{background:linear-gradient(135deg,#ff4fa3,#a75cff)!important;border-color:#ff4fa3!important;color:white!important} body[data-site-theme="vice"] table,body[data-site-theme="vice"] .fish-table,body[data-site-theme="vice"] .member-card,body[data-site-theme="vice"] .calc-pane,body[data-site-theme="vice"] .fish-column{border-color:rgba(255,100,184,.15)!important;background:linear-gradient(145deg,rgba(27,14,40,.82),rgba(7,15,27,.84))!important} body[data-site-theme="vice"] th{color:#59f5ea!important}body[data-site-theme="vice"] td{color:#d5c7d8!important;border-color:rgba(255,255,255,.06)!important} body[data-site-theme="vice"] input:focus,body[data-site-theme="vice"] select:focus,body[data-site-theme="vice"] textarea:focus{border-color:#59f5ea!important;box-shadow:0 0 0 3px rgba(85,245,233,.08),0 0 22px rgba(255,79,163,.06)!important;outline:0} body[data-site-theme="vice"] .lma-addon-heading h1,body[data-site-theme="vice"] .lma-addon-heading h2,body[data-site-theme="vice"] .lma-addon-heading h3,body[data-site-theme="vice"] .lma-cms-page h1,body[data-site-theme="vice"] .lma-cms-page h2,body[data-site-theme="vice"] .lma-cms-page h3{background:linear-gradient(100deg,#fff 0%,#ff9bd1 50%,#69f8ed 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none!important} body[data-site-theme="vice"] .lma-addon-text,body[data-site-theme="vice"] .lma-cms-page p{color:#d0c0d4!important}body[data-site-theme="vice"] hr{border-color:rgba(85,245,233,.20)!important;opacity:1} body[data-site-theme="vice"] .badge,body[data-site-theme="vice"] .alert{border-color:rgba(85,245,233,.18)!important;box-shadow:0 10px 30px rgba(0,0,0,.18)} body[data-site-theme="vice"] .footer a:hover{color:#59f5ea!important;text-shadow:0 0 14px rgba(85,245,233,.35)} @keyframes viceFrontGrid{to{background-position:80px 80px}}@media(prefers-reduced-motion:reduce){body[data-site-theme="vice"] .hero-grid{animation:none!important}} /* V107 builder addons */ .lma-quote{margin:1.5rem 0}.lma-addon-list{display:grid;gap:.55rem;padding-left:1.2rem}.lma-progress-wrap .progress{height:8px;background:rgba(255,255,255,.08)}.lma-progress-wrap .progress-bar{background:linear-gradient(90deg,var(--lma-primary,#f2d27d),var(--lma-secondary,#c7a25a))}body[data-site-theme="vice"] .lma-quote{border-color:#59f5ea!important;background:linear-gradient(90deg,rgba(85,245,234,.06),transparent)}body[data-site-theme="vice"] .lma-addon-list li::marker{color:#ff4fa3}body[data-site-theme="vice"] .lma-progress-wrap .progress-bar{background:linear-gradient(90deg,#ff4fa3,#a75cff,#59f5ea);box-shadow:0 0 16px rgba(85,245,234,.22)} /* V108 Content Engine Pro */ .lma-section{position:relative}.lma-section>.lma-section-overlay{position:absolute;inset:0;pointer-events:none}.lma-section>.container,.lma-section>.container-fluid{position:relative;z-index:1}.lma-icon-box,.lma-counter{padding:1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.035)}.lma-icon-box .lma-icon{font-size:2rem}.lma-counter strong{display:block;font-size:clamp(2.5rem,7vw,5rem);line-height:1}.lma-socials{display:flex;gap:.8rem;flex-wrap:wrap}.lma-socials a{padding:.65rem 1rem;border:1px solid currentColor;border-radius:999px;text-decoration:none}.lma-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.lma-cms-page [contenteditable="true"]{outline:2px solid #5cecff;outline-offset:4px;background:rgba(92,236,255,.08)}body[data-frontend-theme="vice"] .lma-icon-box,body[data-frontend-theme="vice"] .lma-counter{border-color:rgba(81,227,255,.25);box-shadow:0 20px 60px rgba(128,40,255,.12)}body[data-frontend-theme="vice"] .lma-progress-wrap .progress-bar{background:linear-gradient(90deg,#ff4fbf,#8a56ff,#44e9ff)} /* Builder-only classes are attached by the parent backend to the preview iframe. */ .lma-builder-node{outline:1px dashed transparent;outline-offset:2px;transition:outline-color .18s,box-shadow .18s,opacity .18s}.lma-builder-node:hover{outline-color:rgba(68,233,255,.8)}.lma-canvas-drop{outline:2px solid #ff4fbf!important;box-shadow:0 0 0 5px rgba(255,79,191,.14),0 0 30px rgba(68,233,255,.18)!important}.lma-dragging{opacity:.38!important} /* V109 · Runtime modules */ .lma-module-position{position:relative;z-index:4}.lma-module-position-header,.lma-module-position-topbar{width:100%}.lma-module-position-footer{max-width:1320px;margin:0 auto}.lma-runtime-module{margin:12px auto;padding:14px 18px;max-width:1320px;border:1px solid color-mix(in srgb,var(--lma-primary,#f2d27d) 18%,transparent);border-radius:var(--lma-radius,10px);background:rgba(8,8,12,.72);backdrop-filter:blur(12px)}.lma-runtime-module-title{font-weight:800;letter-spacing:.06em;margin-bottom:6px}.nav-divider{width:1px;height:24px;border:0;background:rgba(255,255,255,.18);margin:8px}.dropdown-menu{background:rgba(9,8,14,.96);border-color:rgba(255,255,255,.12);backdrop-filter:blur(18px)}.dropdown-item{color:var(--lma-white,#fff)}.dropdown-item:hover,.dropdown-item:focus{background:rgba(255,255,255,.07);color:var(--lma-primary,#f2d27d)}html[data-site-theme="vice"] .lma-runtime-module{border-color:rgba(255,79,163,.26);box-shadow:0 0 30px rgba(82,231,255,.05)} /* ===== V112.1 Dynamic Builder Addons + Member Portal Pro ===== */ .lma-dynamic-empty{padding:22px;border:1px dashed rgba(199,162,90,.35);border-radius:14px;text-align:center;opacity:.72} .lma-member-dynamic-card{position:relative;padding:24px;border:1px solid color-mix(in srgb,var(--gold2,#c7a25a) 35%,transparent);border-radius:18px;background:linear-gradient(145deg,rgba(18,18,18,.92),rgba(7,7,7,.96));box-shadow:0 18px 50px rgba(0,0,0,.28)} .lma-member-dynamic-card h3{margin:.35rem 0}.lma-member-dynamic-card p,.lma-member-dynamic-card small{opacity:.72}.lma-member-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.08)} .lma-member-dynamic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.lma-member-grid-item{padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;gap:4px}.lma-member-grid-item span,.lma-member-grid-item small{opacity:.68} .lma-task-board-dynamic{display:grid;gap:8px}.lma-task-dynamic{display:grid;grid-template-columns:6px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03)}.lma-task-dynamic>span{width:6px;height:34px;border-radius:5px;background:#8b91a3}.lma-task-dynamic .prio-high{background:#ffb84d}.lma-task-dynamic .prio-urgent{background:#ff5b70;box-shadow:0 0 16px rgba(255,91,112,.45)}.lma-task-dynamic div{display:flex;flex-direction:column}.lma-task-dynamic small{opacity:.65} .lma-map-point-card{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:linear-gradient(135deg,rgba(19,32,43,.82),rgba(9,12,17,.94))}.lma-map-point-card>span{font-size:1.8rem;color:#40dfff}.lma-map-point-card div{flex:1}.lma-map-point-card h3{margin:0}.lma-map-point-card small{opacity:.65}.lma-map-point-card a{text-decoration:none} .lma-dynamic-table caption{caption-side:top;font-weight:800;color:inherit}.lma-dynamic-calculator{padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(255,255,255,.035)}.lma-dynamic-calculator>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.lma-dynamic-calculator label{display:flex;flex-direction:column;gap:6px;font-size:.8rem}.lma-dynamic-calculator input{width:100%;padding:10px;border-radius:9px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.18);color:inherit} .member-pro-dashboard{padding:0 0 36px}.member-pro-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-10px}.member-pro-kpi{padding:16px 18px;border:1px solid rgba(199,162,90,.22);border-radius:14px;background:linear-gradient(145deg,rgba(24,21,15,.92),rgba(8,8,8,.96));box-shadow:0 12px 35px rgba(0,0,0,.22)}.member-pro-kpi small{display:block;color:var(--gold2);font-size:.68rem;font-weight:800;letter-spacing:.12em}.member-pro-kpi b{display:block;font-size:2rem;line-height:1.1;margin:.2rem 0}.member-pro-kpi span{font-size:.78rem;opacity:.64}.member-pro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.member-pro-panel{padding:20px;border:1px solid rgba(199,162,90,.2);border-radius:16px;background:rgba(10,10,10,.78)}.member-pro-panel h3{margin:0 0 14px}.member-pro-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}.member-pro-row:last-child{border-bottom:0}.member-pro-row>div{flex:1;display:flex;flex-direction:column}.member-pro-row small{opacity:.58}.member-pro-priority{width:7px;height:34px;border-radius:8px;background:#8c92a0}.member-pro-priority.high{background:#ffb84d}.member-pro-priority.urgent{background:#ff5b70;box-shadow:0 0 14px rgba(255,91,112,.45)}.member-pro-status{display:inline-flex;padding:4px 7px;border-radius:999px;background:rgba(199,162,90,.12);color:var(--gold2);font-size:.68rem;font-weight:800;text-transform:uppercase}.member-pro-news{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.member-pro-news:last-child{border-bottom:0}.member-pro-news b{display:block}.member-pro-news p{margin:.25rem 0 0;opacity:.68;font-size:.86rem} @media(max-width:900px){.member-pro-kpis{grid-template-columns:repeat(2,1fr)}.member-pro-grid{grid-template-columns:1fr}}@media(max-width:540px){.member-pro-kpis{grid-template-columns:1fr}} /* ===== V112.2 Member Portal continuity + Builder live modules ===== */ .member-hero-pro{position:relative;min-height:520px;display:flex;align-items:flex-end;overflow:hidden;padding:120px 0 54px!important;border-bottom:1px solid rgba(199,162,90,.2)} .member-hero-photo{position:absolute;inset:0;background:url('../../uploads/images/backend/vice-hero.jpg') center/cover no-repeat;filter:saturate(.7) contrast(1.08) brightness(.62);transform:scale(1.02)} .member-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,8,.97) 0%,rgba(5,5,8,.78) 42%,rgba(5,5,8,.28) 74%),linear-gradient(0deg,#080808 0%,transparent 54%)} .member-hero-pro .container{z-index:2}.member-hero-pro .member-title{font-size:clamp(5rem,11vw,10rem);max-width:800px}.member-hero-pro .member-intro{max-width:760px}.member-quick-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.member-quick-nav a{padding:8px 11px;border:1px solid rgba(199,162,90,.25);border-radius:8px;background:rgba(5,5,7,.38);backdrop-filter:blur(8px);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d9d2c6}.member-quick-nav a:hover{border-color:var(--gold2);color:var(--gold2);background:rgba(199,162,90,.08)} .member-admin-list-intro{max-width:900px;color:#aaa39a;line-height:1.65}.member-admin-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.member-admin-list-card{border:1px solid rgba(199,162,90,.18);border-radius:14px;background:#0b0b0c;overflow:hidden}.member-admin-list-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}.member-admin-list-head small{display:block;color:var(--gold2);font-size:.62rem;letter-spacing:.12em;font-weight:900}.member-admin-list-head h3{margin:3px 0 0;font-size:1.15rem}.member-admin-list-head>span{font-size:.7rem;color:#938d84}.member-admin-table{width:100%;border-collapse:collapse;font-size:.78rem}.member-admin-table th,.member-admin-table td{padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}.member-admin-table th{color:var(--gold2);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(199,162,90,.04)}.member-admin-table td{color:#d4cec4}.member-admin-list-empty{padding:18px;border:1px dashed rgba(199,162,90,.28);border-radius:12px;color:#aaa39a}.fish-admin-source{display:flex;align-items:center;justify-content:space-between;gap:14px}.fish-admin-source>div{display:flex;flex-direction:column}.fish-admin-source small{color:#8f897f}.fish-admin-source .fish-admin-toggle{text-decoration:none} .lma-admin-list-module{border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden}.lma-admin-list-module table{margin:0}.lma-dynamic-table caption{padding:12px 14px;color:inherit;background:rgba(255,255,255,.035)}.lma-dynamic-table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;opacity:.7} .lma-rich-text{line-height:1.65}.lma-rich-text>:last-child{margin-bottom:0} .lma-admin-calculator{padding:22px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:rgba(255,255,255,.03)}.lma-admin-calculator h3{margin:0 0 15px}.lma-calc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lma-calc-fields label{display:flex;flex-direction:column;gap:6px;font-size:.72rem;font-weight:700}.lma-calc-fields input,.lma-fish-calc-row input{min-height:42px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(0,0,0,.28);color:inherit;padding:8px 10px}.lma-calc-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}.lma-calc-results span{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.025)}.lma-calc-results small{display:block;opacity:.62}.lma-calc-results b{font-size:1.25rem}.lma-fish-calc-list{display:grid;gap:6px}.lma-fish-calc-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 100px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}.lma-fish-calc-row span{display:flex;flex-direction:column}.lma-fish-calc-row span small{opacity:.55;font-size:.65rem}.lma-fish-calc-row em{font-style:normal;text-align:right}.lma-fish-builder .lma-calc-results{grid-template-columns:1fr} @media(max-width:900px){.member-admin-list-grid{grid-template-columns:1fr}.member-hero-pro{min-height:440px}.lma-calc-fields{grid-template-columns:1fr}.lma-calc-results{grid-template-columns:1fr}.fish-admin-source{align-items:flex-start;flex-direction:column}}@media(max-width:540px){.member-hero-pro{min-height:400px;padding:100px 0 36px!important}.member-hero-pro .member-title{font-size:4.4rem}.lma-fish-calc-row{grid-template-columns:1fr 70px}.lma-fish-calc-row input{grid-column:1/-1}} /* V112.3 EPIC BUILDER frontend primitives */ .lma-section{position:relative}.lma-section>.container,.lma-section>.container-fluid{position:relative;z-index:2}.lma-section-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}.lma-section-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.lma-shape{position:absolute;left:0;width:100%;height:54px;z-index:3;pointer-events:none;background:currentColor}.lma-shape-top{top:-1px}.lma-shape-bottom{bottom:-1px}.shape-wave{clip-path:path('M0 25 Q 25 0 50 25 T100 25 V54 H0 Z')}.shape-angle{clip-path:polygon(0 0,100% 65%,100% 100%,0 100%)}.shape-curve{clip-path:ellipse(70% 60% at 50% 100%)} .lma-pro-card,.lma-feature-box,.lma-testimonial,.lma-person-card,.lma-pricing-card,.lma-cta-card{border:1px solid rgba(127,127,127,.25);border-radius:18px;padding:24px;background:rgba(127,127,127,.06);height:100%}.lma-pro-card>img,.lma-person-card>img{width:100%;max-height:360px;object-fit:cover;border-radius:14px;margin-bottom:18px}.lma-feature-box>span,.lma-icon-addon{display:inline-flex;align-items:center;justify-content:center}.lma-feature-box>span{width:52px;height:52px;border-radius:14px;background:rgba(127,127,127,.12);font-size:28px;margin-bottom:14px}.lma-testimonial>p{font-size:1.15em}.lma-testimonial footer{display:flex;align-items:center;gap:12px}.lma-testimonial footer img{width:46px;height:46px;border-radius:50%;object-fit:cover}.lma-testimonial footer small,.lma-person-card small{display:block;opacity:.7}.lma-pricing-card .lma-price{font-size:2rem;font-weight:800;margin:10px 0 18px}.lma-pricing-card ul{padding-left:20px}.lma-cta-card{display:flex;align-items:center;justify-content:space-between;gap:24px}.lma-iframe-addon iframe,.lma-lottie-addon iframe{width:100%;min-height:320px;border:0;border-radius:16px}.lma-hide-desktop{display:none!important}@media(max-width:1199.98px){.lma-hide-desktop{display:initial!important}.lma-hide-tablet{display:none!important}}@media(max-width:767.98px){.lma-hide-tablet{display:initial!important}.lma-hide-mobile{display:none!important}.lma-cta-card{align-items:flex-start;flex-direction:column}} @media(prefers-reduced-motion:reduce){[data-lma-interaction]{transition:none!important}} /* V112.7 configurable Landing Sequence */ .loading-screen.landing-sequence{background:var(--landing-bg,#050505);color:var(--landing-text,#ddd);transition:opacity .55s ease,visibility .55s ease}.landing-sequence .loader-mark{gap:14px}.landing-sequence .loader-mark svg{width:76px;stroke:var(--landing-accent,#c7a25a);animation:none}.landing-logo-image{display:block;max-width:min(180px,34vw);max-height:120px;object-fit:contain}.landing-sequence-name{color:var(--landing-text,#ddd)!important;font:700 14px/1.2 var(--serif);letter-spacing:.42em;text-transform:uppercase}.landing-sequence-kicker{font:700 10px/1.4 var(--sans,Inter,Arial,sans-serif);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--landing-text,#ddd) 68%,transparent)}.landing-sequence-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06);overflow:hidden}.landing-sequence-progress i{display:block;width:100%;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--landing-accent,#c7a25a),var(--landing-accent2,#f2d27d));animation:lmaLandingProgress var(--landing-duration,1400ms) cubic-bezier(.2,.8,.2,1) forwards}.landing-sequence[data-logo-effect="pulse"] .loader-mark svg,.landing-sequence[data-logo-effect="pulse"] .landing-logo-image{animation:lmaLandingPulse 1.2s ease-in-out infinite}.landing-sequence[data-logo-effect="zoom"] .loader-mark svg,.landing-sequence[data-logo-effect="zoom"] .landing-logo-image{animation:lmaLandingZoom .8s cubic-bezier(.2,.8,.2,1) both}.landing-sequence[data-logo-effect="fade"] .loader-mark svg,.landing-sequence[data-logo-effect="fade"] .landing-logo-image{animation:lmaLandingFade .8s ease both}.landing-sequence[data-logo-effect="glow"] .loader-mark svg,.landing-sequence[data-logo-effect="glow"] .landing-logo-image{animation:lmaLandingGlow 1.3s ease-in-out infinite}.landing-sequence[data-text-effect="fade-up"] .landing-sequence-name,.landing-sequence[data-text-effect="fade-up"] .landing-sequence-kicker{animation:lmaLandingUp .85s .16s cubic-bezier(.2,.8,.2,1) both}.landing-sequence[data-text-effect="fade"] .landing-sequence-name,.landing-sequence[data-text-effect="fade"] .landing-sequence-kicker{animation:lmaLandingFade .8s .12s ease both}.landing-sequence[data-text-effect="blur"] .landing-sequence-name,.landing-sequence[data-text-effect="blur"] .landing-sequence-kicker{animation:lmaLandingBlur .9s .1s ease both}.landing-sequence[data-text-effect="scale"] .landing-sequence-name,.landing-sequence[data-text-effect="scale"] .landing-sequence-kicker{animation:lmaLandingZoom .8s .12s ease both}@keyframes lmaLandingProgress{to{transform:scaleX(1)}}@keyframes lmaLandingPulse{50%{transform:scale(1.055);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--landing-accent,#c7a25a) 55%,transparent))}}@keyframes lmaLandingZoom{from{opacity:0;transform:scale(.76)}to{opacity:1;transform:none}}@keyframes lmaLandingFade{from{opacity:0}to{opacity:1}}@keyframes lmaLandingGlow{50%{filter:drop-shadow(0 0 26px var(--landing-accent,#c7a25a))}}@keyframes lmaLandingUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes lmaLandingBlur{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}.brand-icon img{width:100%;height:100%;object-fit:contain;display:block} .loading-screen.landing-sequence:after{display:none!important} /* V112.11 builder-preview fidelity: keep hero editable without a full-screen empty canvas. */ body[data-builder-preview="1"] .subhero{min-height:min(56svh,560px);padding-top:118px;padding-bottom:58px} body[data-builder-preview="1"] .subhero-title{font-size:clamp(4.6rem,11vw,9rem)} /* V112.15 — member portal builder-ready operations */ .member-live-now{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.38);backdrop-filter:blur(12px)} .member-live-now span{font-size:.68rem;letter-spacing:.18em;color:var(--gold2);font-weight:800}.member-live-now b,.member-live-now strong{font-size:.88rem}.member-live-now em{font-style:normal;font-size:.75rem;opacity:.72;margin-left:auto} .member-week15{margin:22px 0 28px;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,10,.72);overflow:hidden}.member-week15-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.member-week15-head small{color:var(--gold2);letter-spacing:.15em}.member-week15-head h3{margin:3px 0;font-family:'Cinzel',serif}.member-week15-head p{margin:0;opacity:.6}.member-week15-head button{min-width:38px;height:38px;border:1px solid rgba(199,162,90,.4);background:#0b0b0b;color:#fff;margin-left:5px}.member-week15-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.member-week15-day{min-width:0;border-right:1px solid rgba(255,255,255,.08)}.member-week15-day:last-child{border-right:0}.member-week15-day.today{background:rgba(199,162,90,.07)}.member-week15-day>header{position:static!important;height:auto!important;padding:11px!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;box-shadow:none!important;transform:none!important}.member-week15-day>header b{font-size:.8rem}.member-week15-day>header span{font-size:.68rem;opacity:.55}.member-week15-day>div{padding:9px;min-height:170px}.member-week15-day em{display:block;font-style:normal;font-size:.66rem;padding:5px 6px;margin-bottom:5px;background:rgba(255,255,255,.05)}.member-week15-day em.holiday{color:#ff9bac}.member-week15-day em.school{color:#91afff}.member-week15-day section{position:relative;margin-top:6px;padding:7px;border:1px solid rgba(255,255,255,.1);background:#0b0b0b}.member-week15-day section small{display:block;font-size:.58rem;opacity:.55}.member-week15-day section strong{display:block;font-size:.72rem;margin-top:2px}.member-week15-day section i{position:absolute;right:6px;top:5px;color:var(--gold2)}.member-week15-day .empty{opacity:.32}.member-system-modules{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.member-system-modules article{padding:18px;border:1px solid rgba(199,162,90,.25);background:rgba(199,162,90,.05)}.member-system-modules small{color:var(--gold2);letter-spacing:.12em}.member-system-modules h3{margin:5px 0}.member-system-modules code,.member-admin-list-head code{display:block;color:var(--gold2);font-size:.7rem;user-select:all} @media(max-width:1100px){.member-week15-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.member-week15-head{align-items:flex-start;flex-direction:column}.member-week15-grid,.member-system-modules{grid-template-columns:1fr}.member-live-now em{margin-left:0;width:100%}} /* V112.16 — Website Intro exact design variables */ .loading-screen.landing-sequence[data-vertical="upper"]{place-items:start center;padding-top:14vh}.loading-screen.landing-sequence[data-vertical="lower"]{place-items:end center;padding-bottom:14vh} .loading-screen.landing-sequence .loader-mark svg{width:var(--landing-logo-size,76px)!important;height:var(--landing-logo-size,76px)!important;stroke:var(--landing-logo-color,var(--landing-accent,#c7a25a))!important} .loading-screen.landing-sequence .landing-logo-image{width:var(--landing-logo-size,76px)!important;height:var(--landing-logo-size,76px)!important;max-width:none!important;max-height:none!important;object-fit:contain} .loading-screen.landing-sequence .landing-sequence-name{font-size:var(--landing-name-size,14px)!important;letter-spacing:var(--landing-letter-spacing,.42em)!important} .loading-screen.landing-sequence .landing-sequence-kicker{font-size:var(--landing-kicker-size,10px)!important} .loading-screen.landing-sequence .landing-sequence-progress{left:50%!important;right:auto!important;width:var(--landing-progress-width,100%)!important;height:var(--landing-progress-height,3px)!important;transform:translateX(-50%)} /* --- Suchtreffer hervorheben ------------------------------------------- Ein Sprung allein sagt nicht, WAS gemeint war: man steht an der Stelle und sucht weiter. Deshalb blitzt das Ziel kurz auf. Bewusst als Ring ausserhalb des Elements (outline statt border), damit sich das Layout nicht um einen Pixel verschiebt. */ @keyframes cmsTrefferPuls{ 0%{outline-color:rgba(201,167,90,.95);background-color:rgba(201,167,90,.13)} 70%{outline-color:rgba(201,167,90,.55);background-color:rgba(201,167,90,.07)} 100%{outline-color:rgba(201,167,90,0);background-color:transparent} } .cms-treffer{ outline:2px solid rgba(201,167,90,.95); outline-offset:6px; border-radius:4px; animation:cmsTrefferPuls 2.6s ease-out forwards; } @media (prefers-reduced-motion:reduce){ .cms-treffer{animation:none;outline-color:rgba(201,167,90,.7)} } /* Weicher Wechsel der Vorschlagswoerter im Suchfeld. Ein harter Sprung wirkt wie ein Fehler; das kurze Ausblenden macht daraus eine Bewegung. */ #cmsSearchInput::placeholder{transition:opacity .22s ease} #cmsSearchInput.is-wechselnd::placeholder{opacity:0} @media (prefers-reduced-motion:reduce){ #cmsSearchInput::placeholder{transition:none} } /* ======================================================================== * Rechner und Preislisten * * Bewusst im Stil der Mitgliederkarten gehalten: gedeckte Flaeche, goldener * Akzent, keine eigene Farbwelt. Der Rechner ist ein Werkzeug im * Mitgliederbereich, kein Blickfang. * ===================================================================== */ .cms-calc{ --cms-calc-linie:rgba(201,167,90,.18); color:var(--cms-text,#e8e4dc); } .cms-calc-loading{color:rgba(232,228,220,.5);font-size:.9rem;padding:1.5rem 0} .cms-calc-locked, .cms-calc .cms-access-notice{ padding:2.2rem 1.5rem; text-align:center; border:1px dashed var(--cms-calc-linie); border-radius:12px; color:rgba(232,228,220,.6); } /* --- Umschalter zwischen den Rechnern --------------------------------- */ .cms-calc-switch{ display:flex;flex-wrap:wrap;gap:.5rem; margin-bottom:1.5rem; } .cms-calc-switch button{ padding:.55rem 1.1rem; border:1px solid var(--cms-calc-linie); border-radius:999px; background:transparent; color:rgba(232,228,220,.7); font-family:inherit; font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease; } .cms-calc-switch button:hover{color:#e8e4dc;border-color:rgba(201,167,90,.45)} .cms-calc-switch button.is-active{ background:rgba(201,167,90,.12); border-color:rgba(201,167,90,.6); color:#c9a75a; } .cms-calc-head{margin-bottom:1.4rem} .cms-calc-head h3{ margin:0; font-size:1.5rem;letter-spacing:.02em; } .cms-calc-head p{margin:.4rem 0 0;color:rgba(232,228,220,.55);font-size:.92rem} /* --- Preisliste --------------------------------------------------------- */ .cms-calc-cols{ display:grid; grid-template-columns:repeat(var(--cms-calc-spalten,2),minmax(0,1fr)); gap:1.6rem; } @media (max-width:820px){ .cms-calc-cols{grid-template-columns:1fr} } .cms-calc-col h4{ display:flex;align-items:center;gap:.6rem; margin:0 0 .9rem; padding-bottom:.6rem; border-bottom:1px solid var(--cms-calc-linie); font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:#c9a75a; } .cms-calc-col h4 span{ margin-left:auto; padding:.15rem .5rem; border-radius:999px; background:rgba(201,167,90,.12); font-size:.7rem;letter-spacing:.06em; color:rgba(232,228,220,.6); } .cms-calc-rows{display:flex;flex-direction:column;gap:.35rem} /* Vier Spalten je Zeile: Name, Preis, Menge, Zwischensumme. */ .cms-calc-row{ display:grid; grid-template-columns:1fr auto 72px 96px; align-items:center;gap:.75rem; padding:.55rem .7rem; border:1px solid transparent; border-radius:9px; cursor:text; transition:background .18s ease,border-color .18s ease; } .cms-calc-row:hover{background:rgba(255,255,255,.025)} .cms-calc-row.is-aktiv{ background:rgba(201,167,90,.07); border-color:rgba(201,167,90,.28); } .cms-calc-name{font-size:.94rem;line-height:1.35} .cms-calc-name em{ display:block; font-style:normal;font-size:.75rem; color:rgba(232,228,220,.45); } .cms-calc-price{ font-size:.82rem; color:rgba(232,228,220,.5); font-variant-numeric:tabular-nums; white-space:nowrap; } .cms-calc-sum{ text-align:right; font-size:.9rem;font-weight:600; font-variant-numeric:tabular-nums; color:rgba(232,228,220,.35); white-space:nowrap; } .cms-calc-row.is-aktiv .cms-calc-sum{color:#c9a75a} .cms-calc input[type=number]{ width:100%; padding:.4rem .55rem; border:1px solid var(--cms-calc-linie); border-radius:7px; background:rgba(0,0,0,.28); color:#e8e4dc; font:inherit;font-size:.9rem; text-align:center; font-variant-numeric:tabular-nums; transition:border-color .18s ease,box-shadow .18s ease; } .cms-calc input[type=number]:focus{ outline:none; border-color:rgba(201,167,90,.7); box-shadow:0 0 0 3px rgba(201,167,90,.14); } /* Die Pfeilchen des Browsers stehlen Platz und werden hier nicht gebraucht. */ .cms-calc input[type=number]::-webkit-inner-spin-button, .cms-calc input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .cms-calc input[type=number]{-moz-appearance:textfield;appearance:textfield} .cms-calc-empty{color:rgba(232,228,220,.4);font-size:.88rem;padding:.8rem 0} .cms-calc-total{ display:flex;align-items:center;justify-content:space-between; margin-top:1.6rem;padding-top:1.1rem; border-top:1px solid var(--cms-calc-linie); } .cms-calc-total span{ font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:rgba(232,228,220,.5); } .cms-calc-total b{ font-size:1.6rem;font-weight:700; color:#c9a75a; font-variant-numeric:tabular-nums; } /* --- Umrechnung --------------------------------------------------------- */ .cms-calc-rate{display:grid;gap:1.6rem} .cms-calc-rate-input label{ display:block;margin-bottom:.6rem; font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:#c9a75a; } .cms-calc-stepper{ display:flex;align-items:stretch;gap:.5rem; max-width:280px; } .cms-calc-stepper button{ width:44px;flex:0 0 44px; border:1px solid var(--cms-calc-linie); border-radius:9px; background:rgba(0,0,0,.28); color:#c9a75a; font-size:1.2rem;line-height:1; cursor:pointer; transition:border-color .18s ease,background .18s ease; } .cms-calc-stepper button:hover{border-color:rgba(201,167,90,.6);background:rgba(201,167,90,.1)} .cms-calc-stepper input{font-size:1.05rem!important;font-weight:600} .cms-calc-rate-out{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; } .cms-calc-rate-out > div{ padding:1rem 1.2rem; border:1px solid var(--cms-calc-linie); border-radius:11px; background:rgba(255,255,255,.02); } .cms-calc-rate-out small{ display:block;margin-bottom:.35rem; font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:rgba(232,228,220,.45); } .cms-calc-rate-out b{ font-size:1.45rem;font-weight:700; color:#c9a75a; font-variant-numeric:tabular-nums; } /* --- Fuss --------------------------------------------------------------- */ .cms-calc-foot{margin-top:1.4rem;display:flex;justify-content:flex-end} .cms-calc-reset{ padding:.5rem 1rem; border:1px solid var(--cms-calc-linie); border-radius:8px; background:transparent; color:rgba(232,228,220,.55); font:inherit;font-size:.8rem; cursor:pointer; transition:color .18s ease,border-color .18s ease; } .cms-calc-reset:hover{color:#e8e4dc;border-color:rgba(201,167,90,.45)} @media (max-width:520px){ .cms-calc-row{grid-template-columns:1fr 64px 84px;row-gap:.3rem} .cms-calc-price{grid-column:1;font-size:.78rem} } /* --- Umrechnung: zwei gleichberechtigte Felder ------------------------- */ .cms-calc-pair{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:1.2rem; } @media (max-width:640px){ .cms-calc-pair{grid-template-columns:1fr;gap:.9rem} .cms-calc-eq{transform:rotate(90deg);justify-self:center} } .cms-calc-eq{ padding-bottom:.7rem; font-size:1.4rem; color:rgba(201,167,90,.5); } .cms-calc-formel{ margin:.9rem 0 0; font-size:.8rem; color:rgba(232,228,220,.4); font-variant-numeric:tabular-nums; } /* Der selbst gesetzte Preis. */ .cms-calc-rate-out > div.is-editable{border-color:rgba(201,167,90,.35)} .cms-calc-preisfeld{display:flex;align-items:center;gap:.5rem} .cms-calc-preisfeld input{ width:100%;max-width:130px; font-size:1.2rem!important;font-weight:700; text-align:left!important; color:#c9a75a!important; } .cms-calc-preisfeld span{font-size:1.1rem;font-weight:700;color:#c9a75a} .cms-calc-preis-hint{ display:block;margin-top:.45rem; font-size:.68rem!important;letter-spacing:.06em!important; text-transform:none!important; color:rgba(232,228,220,.35)!important; } .cms-calc-preis-reset{ display:block;margin-top:.45rem;padding:0; border:0;background:none; color:rgba(201,167,90,.75); font:inherit;font-size:.7rem;letter-spacing:.04em; text-decoration:underline;text-underline-offset:3px; cursor:pointer; } .cms-calc-preis-reset:hover{color:#c9a75a} /* === Hintergrundschichten ============================================== */ /* * Farbe und Bild kommen als CSS-Eigenschaft aus dem Builder. Video und * Parallax brauchen dagegen eigenes Markup - der Renderer legt es als * .cms-bg vor den Inhalt. * * Warum die Schicht *vor* dem Inhalt im Markup steht und nicht dahinter: * So braucht es keinen negativen z-index. Der zoege die Schicht sonst * hinter den Seitenhintergrund, und man saehe genau gar nichts - der * klassische Fehler bei Videohintergruenden. */ .cms-has-bg { position: relative; } .cms-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; border-radius: inherit; } /* Alles ausser der Schicht gehoert darueber. */ .cms-has-bg > :not(.cms-bg) { position: relative; z-index: 1; } .cms-bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; } /* * Die Parallaxflaeche ist absichtlich groesser als ihr Abschnitt: oben und * unten je 25 % Zugabe. Genau so weit darf sie beim Rollen wandern, ohne * dass eine Kante ins Bild rutscht. */ .cms-bg-parallax { position: absolute; left: 0; right: 0; top: -25%; bottom: -25%; background-size: cover; background-position: center; background-repeat: no-repeat; transform: translate3d(0, var(--cms-parallax-shift, 0px), 0); } /* will-change erst, wenn die Flaeche wirklich im Bild ist - sonst haelt der Browser fuer jede Schicht der Seite dauerhaft eine eigene Ebene vor. */ .cms-bg-parallax.is-live { will-change: transform; } .cms-bg-overlay { position: absolute; inset: 0; } /* * Der wandernde Farbverlauf. * * background-size ist bewusst ein Vielfaches der Flaeche: Nur so gibt es * ueberhaupt etwas zu verschieben. Bei 100% stuende der Verlauf still, egal * wie die background-position wandert - der haeufigste Grund, warum ein * animierter Verlauf im Netz "nicht funktioniert". * * Bewegt wird background-position und nicht transform: Ein transform wuerde * die Kanten ins Bild ziehen, die Position laesst den Verlauf in der Flaeche * fliessen. */ .cms-bg-verlauf { position: absolute; inset: 0; background-size: 300% 300%; animation: cmsVerlaufFliessen var(--cms-verlauf-dauer, 18s) ease-in-out infinite; } @keyframes cmsVerlaufFliessen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* * Ohne Skript bleibt die Flaeche stehen, statt zu fehlen: Der Ausschnitt * zeigt dann einfach die Bildmitte. Dasselbe gilt bei abgeschalteter * Bewegung - dort ist Stillstand die richtige Antwort, nicht Verzicht. * * Der Verlauf behaelt dabei seine Farben; nur das Wandern hoert auf. */ @media (prefers-reduced-motion: reduce) { .cms-bg-parallax { transform: none; } .cms-bg-verlauf { animation: none; background-size: cover; } } /* === Karte ============================================================== */ /* * Die Karte ist ein SVG in einem Rahmen fester Hoehe. Alles Bedienbare liegt * darueber und schwimmt - so bleibt das Bild die ganze Flaeche und die * Werkzeuge verstellen nichts. */ /* * Die Karte übernimmt das Design der Website. * * Alles Farbige darin läuft über diese sechs Variablen, und die holen sich * ihren Wert aus den Theme-Tokens. Stellt jemand ein blaues Design ein, * werden Werkzeugleiste, Infofenster, Auswahl und Schrift blau mit - ohne * dass hier etwas anzupassen wäre. * * Die Kette hat drei Glieder: erst der einstellbare Token aus den * Theme-Einstellungen, dann die Variable des übernommenen Themes, zuletzt * ein fester Wert. So funktioniert die Karte auch in einem Theme, das * weder das eine noch das andere mitbringt. */ .cms-map { --map-akzent: var(--color-accent, var(--gold2, #e3b957)); --map-text: var(--color-text, var(--text, #e8ecf5)); --map-gedaempft: var(--color-muted, var(--muted, #98a2b8)); --map-flaeche: var(--color-surface, var(--panel, #141821)); --map-grund: var(--color-bg, var(--bg, #0b0d12)); --map-linie: var(--color-border, var(--line, rgba(255, 255, 255, .12))); --map-gefahr: var(--color-danger, #ff6b7f); position: relative; overflow: hidden; border-radius: var(--radius, 14px); background: var(--map-grund); border: 1px solid var(--map-linie); /* Die Schrift der Markierungen und Fenster folgt der Website. */ font-family: var(--font-body, inherit); color: var(--map-text); } .cms-map-loading, .cms-map .cms-access-notice { display: grid; place-items: center; height: 100%; color: var(--map-gedaempft); font-size: 14px; } .cms-map-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .cms-map-svg.is-ziehen { cursor: grabbing; } /* * Randstärke und Füllung stehen als Attribute am Element, weil sie pro * Bezirk einstellbar sind. Hier steht deshalb bewusst *kein* fill-opacity * und kein stroke-width: CSS gewinnt gegen Attribute, und eine Regel an * dieser Stelle machte jede Einstellung im Editor wirkungslos. * * Beim Überfahren wird deshalb aufgehellt statt die Deckkraft zu ändern - * das wirkt auf jeden Wert gleich, ohne ihn zu überschreiben. */ .cms-map-districts polygon { cursor: pointer; transition: filter .15s ease; } .cms-map-districts polygon:hover { filter: brightness(1.45); } /* * Die Trefferlinie ist ausdrücklich ausgenommen. * * Sie liegt unsichtbar und breit unter jeder Straße, damit man sie mit der * Maus überhaupt trifft. Griffe hier eine Deckkraft, wäre sie sichtbar - * und zwar als breiter Balken quer über die Karte. */ .cms-map-roads polyline:not(.cms-map-linientreffer) { stroke-opacity: .8; transition: filter .15s ease; } .cms-map-roads polyline { cursor: pointer; } .cms-map-roads polyline:not(.cms-map-linientreffer):hover { filter: brightness(1.35); } /* Die sichtbare Linie reagiert mit, wenn die Trefferfläche überfahren wird - sonst leuchtete nichts auf, obwohl das Schildchen schon steht. */ .cms-map-linientreffer:hover + polyline { filter: brightness(1.35); } .cms-map-marker { cursor: pointer; } /* * Die Trefferfläche. * * Unsichtbar, aber anklickbar - "fill: none" wäre es nicht, deshalb eine * Füllung mit Deckkraft null. Sie ist deutlich größer als der Punkt, weil * ein Finger ungefähr vierzig Bildschirmpunkte bedeckt und niemand * millimetergenau zielt. */ .cms-map-treffer { fill: #000; fill-opacity: 0; stroke: none; } .cms-map-dot { fill: color-mix(in srgb, var(--map-flaeche) 82%, transparent); stroke: color-mix(in srgb, var(--map-text) 55%, transparent); stroke-width: 2.5; transition: fill .15s ease, stroke .15s ease; } .cms-map-marker:hover .cms-map-dot { fill: color-mix(in srgb, var(--map-akzent) 22%, var(--map-flaeche)); stroke: var(--map-akzent); } .cms-map-icon { font-size: 30px; pointer-events: none; user-select: none; } /* * Das Namensschild neben der Markierung. * * Der dunkle Umriss unter der Schrift ist der Grund, warum sie über jedem * Untergrund lesbar bleibt - über hellem Sand genauso wie über dunklem * Wasser. paint-order sorgt dafür, dass der Umriss *hinter* der Füllung * liegt; ohne ihn fräse er sich in die Buchstaben. */ .cms-map-label { font-size: 26px; font-weight: 600; fill: var(--map-text); stroke: color-mix(in srgb, var(--map-grund) 88%, #000); stroke-width: 6; paint-order: stroke fill; pointer-events: none; user-select: none; dominant-baseline: middle; } .cms-map-marker:hover .cms-map-label { fill: var(--map-akzent); } /* * Das Schildchen, das dem Zeiger folgt. * * pointer-events: none ist hier keine Feinheit, sondern Bedingung: Läge es * im Weg, wanderte der Zeiger von der Fläche auf das Schild, das Schild * verschwände, der Zeiger wäre wieder über der Fläche - und es flackerte. */ .cms-map-tip { position: absolute; z-index: 6; pointer-events: none; max-width: 260px; padding: 7px 11px; border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 92%, #000); border: 1px solid color-mix(in srgb, var(--map-akzent) 40%, transparent); box-shadow: 0 8px 26px rgba(0, 0, 0, .45); color: var(--map-text); font-size: 13px; line-height: 1.35; } .cms-map-tip[hidden] { display: none; } .cms-map-tip b { display: block; font-weight: 650; } .cms-map-tip span { display: block; margin-top: 2px; font-size: 11px; opacity: .68; } /* Flächen und Striche heben sich beim Überfahren ab - sonst wüsste man nicht, worauf sich das Schildchen bezieht. */ .cms-map-districts polygon:hover, .cms-map-roads polyline:hover { cursor: pointer; } /* * Strichstärken in Bildschirmpunkten statt in Kartenmaßen. * * Ohne das schrumpft eine drei Einheiten breite Straße auf einer Karte * über 4000 Einheiten Höhe auf ein Sechstel Bildschirmpunkt - sie ist dann * praktisch weg, und getroffen wird sie schon gar nicht. Genauso hielt es * die alte Karte: Dort war die Breite immer eine Angabe in Pixeln. * * Die Fläche selbst skaliert weiter mit; nur der Strich nicht. */ .cms-map-roads polyline, .cms-map-districts polygon, .cms-map-throws line, .cms-map-throws polyline { vector-effect: non-scaling-stroke; } /* Die Trefferlinie behält ihre Breite ebenfalls in Bildschirmpunkten - sonst wäre sie beim Herauszoomen genauso dünn wie die Straße selbst und damit nutzlos. */ .cms-map-linientreffer { vector-effect: non-scaling-stroke; } /* --- Bedienelemente ----------------------------------------------------- */ .cms-map-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; } .cms-map-zoom button { width: 34px; height: 34px; border: 1px solid var(--map-linie); border-radius: 9px; background: color-mix(in srgb, var(--map-flaeche) 88%, transparent); color: var(--map-text); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s ease, border-color .15s ease; } .cms-map-zoom button:hover { background: color-mix(in srgb, var(--map-akzent) 22%, var(--map-flaeche)); border-color: var(--map-akzent); } /* --- Legende ------------------------------------------------------------ */ .cms-map-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 70px); } .cms-map-cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--map-linie); border-radius: 999px; background: color-mix(in srgb, var(--map-flaeche) 88%, transparent); color: var(--map-text); font: inherit; font-size: 12px; cursor: pointer; backdrop-filter: blur(6px); transition: opacity .15s ease, border-color .15s ease; } .cms-map-cat:hover { border-color: var(--map-akzent); } /* Ausgeblendete Gruppen bleiben sichtbar, nur blass - sonst wüsste man nicht mehr, dass es sie gibt und man sie zurückholen kann. */ .cms-map-cat.is-aus { opacity: .38; text-decoration: line-through; } /* --- Suche -------------------------------------------------------------- */ .cms-map-search { position: absolute; left: 12px; top: 12px; width: min(300px, calc(100% - 70px)); } .cms-map-search input { width: 100%; padding: 9px 13px; border: 1px solid var(--map-linie); border-radius: 10px; background: color-mix(in srgb, var(--map-flaeche) 90%, transparent); color: var(--map-text); font: inherit; font-size: 13px; backdrop-filter: blur(6px); } .cms-map-search input:focus { outline: none; border-color: var(--map-akzent); } .cms-map-treffer { margin-top: 6px; max-height: 260px; overflow-y: auto; border: 1px solid var(--map-linie); border-radius: 10px; background: color-mix(in srgb, var(--map-flaeche) 95%, transparent); backdrop-filter: blur(8px); } .cms-map-treffer button { display: block; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--map-linie); background: none; color: var(--map-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .cms-map-treffer button:last-child { border-bottom: 0; } .cms-map-treffer button:hover { background: var(--map-linie); } .cms-map-treffer small { display: block; opacity: .55; font-size: 11px; } .cms-map-leer { padding: 10px 12px; margin: 0; font-size: 12.5px; opacity: .6; } /* --- Infofenster -------------------------------------------------------- */ .cms-map-info { position: absolute; right: 12px; top: 12px; width: min(300px, calc(100% - 24px)); padding: 14px 16px; border: 1px solid var(--map-linie); border-radius: 12px; background: color-mix(in srgb, var(--map-flaeche) 95%, transparent); color: var(--map-text); backdrop-filter: blur(8px); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } .cms-map-info h3 { margin: 0 6px 8px 0; font-size: 15px; } .cms-map-info p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; } .cms-map-postal { font-family: ui-monospace, monospace; opacity: .65; font-size: 12px; } .cms-map-gruppe { opacity: .6; font-size: 12px; } .cms-map-zu { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; opacity: .55; } .cms-map-zu:hover { opacity: 1; background: var(--map-linie); } @media (max-width: 640px) { .cms-map-search { width: calc(100% - 70px); } .cms-map-info { width: calc(100% - 24px); } .cms-map-legend { max-width: calc(100% - 24px); } } /* === Textbaustein: Spalten, Initial, Kürzung ============================ */ .cms-text-body { margin: 0; } .cms-text-title { margin: 0 0 .5em; } /* * Mehrspaltig nur, wo Platz ist. Zwei Spalten auf einem Telefon ergeben * Zeilen von vier Wörtern - das liest niemand. */ @media (max-width: 767px) { .cms-text-cols .cms-text-body { column-count: 1 !important; } } /* Ein Initial darf keine Spalte überspringen - deshalb sitzt es im Textfluss und nicht als eigenes Element daneben. */ .cms-text-dropcap .cms-text-body::first-letter { float: left; font-size: 3.2em; line-height: .82; padding: .08em .12em 0 0; font-weight: 700; color: var(--gold2, currentColor); } /* * Kürzung über line-clamp. Die Zeilenzahl kommt als Variable vom Renderer, * damit sie pro Baustein einstellbar bleibt. */ .cms-text-clamp .cms-text-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cms-clamp, 3); line-clamp: var(--cms-clamp, 3); overflow: hidden; } /* Kürzung und Spalten schließen sich aus - line-clamp braucht einen Block, column-count macht daraus mehrere. Spalten gewinnen. */ .cms-text-cols.cms-text-clamp .cms-text-body { display: block; overflow: visible; } /* === Überschrift mit Symbol ============================================= */ .cms-heading-icon { display: inline-block; vertical-align: baseline; margin-inline: 0 .35em; } .cms-heading-icon:last-child { margin-inline: .35em 0; } /* Ein Verweis in der Überschrift erbt ihre Farbe - sonst reißt ein blaues Standard-Blau die ganze Gestaltung auf. */ .cms-heading a { color: inherit; text-decoration: none; transition: color .15s ease; } .cms-heading a:hover { color: var(--gold2, currentColor); } /* === Animierte Zahlen =================================================== */ .cms-counter { text-align: center; } .cms-counter-value { display: block; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; } .cms-counter-title { display: block; margin-top: .35em; opacity: .75; } /* === Bildbaustein: Form, Effekt, Ausrichtung ============================ */ .cms-image img { display: block; max-width: 100%; height: 100%; object-fit: var(--cms-img-fit, initial); transition: transform .35s ease, filter .35s ease; } /* Ohne gesetzte Höhe soll das Bild sein Verhältnis behalten - height:100% greift sonst ins Leere und macht es platt. */ .cms-image { line-height: 0; } .cms-image img { height: auto; } .cms-image[style*="height"] img, .cms-image.is-circle img { height: 100%; } .cms-image.is-circle img { aspect-ratio: 1; border-radius: 50%; object-fit: cover; } .cms-image.is-rounded img { border-radius: var(--cms-img-radius, 12px); } .cms-image.align-start { text-align: left; } .cms-image.align-center { text-align: center; } .cms-image.align-end { text-align: right; } .cms-image.align-center img, .cms-image.align-end img { display: inline-block; } /* Die Effekte greifen am Bild, nicht am Rahmen - sonst wackelt auch die Bildunterschrift mit. */ .cms-image.fx-grow:hover img { transform: scale(1.06); } .cms-image.fx-shrink:hover img { transform: scale(.95); } .cms-image.fx-gray img { filter: grayscale(1); } .cms-image.fx-gray:hover img { filter: grayscale(0); } .cms-image.fx-bright:hover img { filter: brightness(1.18); } .cms-image.fx-blur img { filter: blur(2px); } .cms-image.fx-blur:hover img { filter: blur(0); } /* --- Dauerbewegung ------------------------------------------------------ Der langsame Zoom, den man von Kopfbildern kennt. Anders als die Effekte darüber läuft er ohne Zutun weiter. Das Bild wird dabei über seinen Rahmen hinaus vergrößert, deshalb muss der Rahmen beschneiden - sonst schöbe das Bild beim Wachsen die Nachbarn weg. transform-origin bleibt mittig: Nur so bleibt das Motiv im Bild, egal in welche Richtung gefahren wird. */ .cms-image.mv-zoom-in, .cms-image.mv-zoom-out, .cms-image.mv-zoom-pendel { overflow: hidden; } .cms-image.mv-zoom-in img, .cms-image.mv-zoom-out img, .cms-image.mv-zoom-pendel img { transform-origin: center center; will-change: transform; } .cms-image.mv-zoom-in img { animation: cmsBildHeran var(--cms-img-dauer, 14s) ease-in-out infinite alternate; } .cms-image.mv-zoom-out img { animation: cmsBildWeg var(--cms-img-dauer, 14s) ease-in-out infinite alternate; } /* „Hin und her" braucht kein alternate - der Weg zurück steht schon in den Bildmarken. Sonst dauerte ein Durchlauf doppelt so lang wie angegeben. */ .cms-image.mv-zoom-pendel img { animation: cmsBildPendel var(--cms-img-dauer, 14s) ease-in-out infinite; } @keyframes cmsBildHeran { from { transform: scale(1); } to { transform: scale(1.12); } } @keyframes cmsBildWeg { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes cmsBildPendel { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } } /* --- Ken Burns im Karussell --------------------------------------------- Die Bewegung läuft nur auf dem Bild, das gerade zu sehen ist. Liefe sie auf allen, wären die anderen längst am Ende, wenn sie an die Reihe kommen - man sähe ein herangefahrenes Standbild und wüsste nicht, warum. Bootstrap setzt .active auf das sichtbare Element. Weil die Regel an .active hängt, startet die Animation bei jedem Wechsel von vorn. */ .cms-kb .carousel-item { overflow: hidden; } .cms-kb .carousel-item img { transform-origin: center center; will-change: transform; } .cms-kb-in .carousel-item.active img { animation: cmsBildHeran var(--cms-kb-dauer, 5s) ease-out both; } .cms-kb-out .carousel-item.active img { animation: cmsBildWeg var(--cms-kb-dauer, 5s) ease-out both; } .cms-kb-pendel .carousel-item.active img { animation: cmsBildPendel var(--cms-kb-dauer, 5s) ease-in-out both; } @media (prefers-reduced-motion: reduce) { .cms-kb .carousel-item.active img { animation: none; transform: none; } } /* Bei „Bewegung reduzieren" bleibt die Farbe, aber nichts bewegt sich. */ @media (prefers-reduced-motion: reduce) { .cms-image img { transition: none; } .cms-image.fx-grow:hover img, .cms-image.fx-shrink:hover img { transform: none; } .cms-image.mv-zoom-in img, .cms-image.mv-zoom-out img, .cms-image.mv-zoom-pendel img { animation: none; transform: none; } } .cms-image figcaption { line-height: 1.5; margin-top: .6em; font-size: .875em; opacity: .7; } /* Der Knopf fürs Großzeigen soll aussehen wie das Bild selbst. */ .cms-image-zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; line-height: 0; } /* --- Großansicht -------------------------------------------------------- */ .cms-lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(4, 6, 12, .92); cursor: zoom-out; animation: cmsLightboxAuf .18s ease; } @keyframes cmsLightboxAuf { from { opacity: 0 } to { opacity: 1 } } .cms-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); } .cms-lightbox-zu { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(8, 12, 24, .8); color: #e8ecf5; font-size: 22px; line-height: 1; cursor: pointer; } .cms-lightbox-zu:hover { background: rgba(30, 40, 70, .9); } /* === Karteneditor ======================================================= */ .cms-map-tools { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--map-linie); border-radius: 12px; background: color-mix(in srgb, var(--map-flaeche) 93%, transparent); backdrop-filter: blur(8px); box-shadow: 0 12px 36px rgba(0, 0, 0, .5); z-index: 3; } .cms-map-tools button { min-width: 34px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--map-text); font: inherit; font-size: 14px; cursor: pointer; transition: background .14s ease; } .cms-map-tools button:hover { background: color-mix(in srgb, var(--map-text) 10%, transparent); } .cms-map-tools button.is-aktiv { background: color-mix(in srgb, var(--map-text) 18%, transparent); } .cms-map-tools button.is-primaer { background: var(--map-akzent); color: var(--map-grund); font-weight: 700; font-size: 12.5px; } .cms-map-tools button.is-primaer:disabled { opacity: .4; cursor: default; } .cms-map-trenn { width: 1px; height: 20px; background: var(--map-linie); margin: 0 3px; } /* Beim Zeichnen ein Fadenkreuz - der Greifzeiger sagte das Falsche. */ .cms-map-svg.is-zeichnen { cursor: crosshair; } /* --- Auswahl und Stützpunkte -------------------------------------------- */ .cms-map-districts polygon.is-gewaehlt, .cms-map-roads polyline.is-gewaehlt { stroke-dasharray: 12 8; stroke-opacity: 1; fill-opacity: .34; } .cms-map-marker.is-gewaehlt .cms-map-dot { stroke: var(--map-akzent); stroke-width: 4; } /* Ausgeblendete Orte bleiben im Editor sichtbar, nur blass - sonst wüsste niemand mehr, dass es sie gibt. */ .cms-map-marker.is-aus { opacity: .38; } .cms-map-marker.is-zu .cms-map-dot { stroke-dasharray: 6 5; } .cms-map-griff { fill: color-mix(in srgb, var(--map-flaeche) 90%, transparent); stroke: var(--map-akzent); stroke-width: 2.5; cursor: move; } .cms-map-griff.is-aktiv { fill: var(--map-akzent); } .cms-map-entwurf { fill: color-mix(in srgb, var(--map-akzent) 18%, transparent); stroke: var(--map-akzent); stroke-width: 3; stroke-dasharray: 10 7; } /* --- Eigenschaften ------------------------------------------------------ */ /* --- Verzeichnis im Editor ---------------------------------------------- */ /* * Steht links, während die Eigenschaften rechts stehen: Man sucht links * einen Ort, klickt ihn an und bearbeitet ihn rechts - beide Fenster * gleichzeitig offen, ohne sich zu überdecken. */ .cms-map-verzeichnis { position: absolute; left: 12px; top: 56px; display: flex; flex-direction: column; width: min(280px, calc(100% - 24px)); max-height: calc(100% - 76px); padding: 12px; border: 1px solid var(--map-linie); border-radius: 12px; background: color-mix(in srgb, var(--map-flaeche) 96%, transparent); color: var(--map-text); backdrop-filter: blur(8px); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); z-index: 4; } .cms-map-verzeichnis header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cms-map-verzeichnis header b { font-size: 13px; } .cms-map-vreiter { display: flex; gap: 4px; margin-bottom: 8px; } .cms-map-vreiter button { flex: 1; padding: 6px 4px; border: 1px solid var(--map-linie); border-radius: 7px; background: transparent; color: var(--map-gedaempft); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .cms-map-vreiter button.is-aktiv { color: var(--map-akzent); border-color: color-mix(in srgb, var(--map-akzent) 45%, transparent); background: color-mix(in srgb, var(--map-akzent) 10%, transparent); } /* Die Anzahl steht kleiner daneben - sie hilft beim Einordnen, soll aber nicht mit der Beschriftung um Aufmerksamkeit ringen. */ .cms-map-vreiter span { opacity: .6; font-size: 9px; } .cms-map-verzeichnis input[type="search"] { width: 100%; margin-bottom: 8px; padding: 7px 9px; border: 1px solid var(--map-linie); border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 60%, transparent); color: var(--map-text); font: inherit; font-size: 13px; } /* Die Liste scrollt, nicht das ganze Fenster - Reiter und Suchfeld sollen stehen bleiben, sonst sucht man beim Blättern seine Werkzeuge. */ .cms-map-vliste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .cms-map-veintrag { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 7px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .cms-map-veintrag:hover { background: color-mix(in srgb, var(--map-text) 8%, transparent); } .cms-map-veintrag.is-gewaehlt { background: color-mix(in srgb, var(--map-akzent) 16%, transparent); box-shadow: inset 2px 0 0 var(--map-akzent); } .cms-map-vmarke { flex: 0 0 20px; text-align: center; font-size: 14px; } .cms-map-vpunkt { display: inline-block; width: 11px; height: 11px; border-radius: 3px; } .cms-map-vtext { min-width: 0; flex: 1; } .cms-map-vtext b { display: block; font-size: 13px; font-weight: 600; } /* Ein langer Name darf das Fenster nicht breiter machen. */ .cms-map-vtext b, .cms-map-vtext small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cms-map-vtext small { display: block; font-size: 10px; color: var(--map-gedaempft); } .cms-map-vaus { font-size: 9px; padding: 2px 5px; border-radius: 99px; background: color-mix(in srgb, var(--map-text) 12%, transparent); color: var(--map-gedaempft); } .cms-map-vleer { margin: 10px 2px; font-size: 12px; color: var(--map-gedaempft); } .cms-map-props { position: absolute; right: 12px; top: 56px; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 76px); overflow-y: auto; padding: 14px 16px; border: 1px solid var(--map-linie); border-radius: 12px; background: color-mix(in srgb, var(--map-flaeche) 96%, transparent); color: var(--map-text); backdrop-filter: blur(8px); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); z-index: 4; } .cms-map-props header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cms-map-props header b { font-size: 13px; } .cms-map-props label { display: block; margin-bottom: 9px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--map-gedaempft); } .cms-map-props label.cms-map-check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: inherit; } .cms-map-props input, .cms-map-props select, .cms-map-props textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--map-linie); border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 70%, transparent); color: var(--map-text); font: inherit; font-size: 12.5px; text-transform: none; letter-spacing: 0; } .cms-map-props label.cms-map-check input { width: auto; margin: 0; } .cms-map-props input[type="color"] { height: 34px; padding: 2px; } .cms-map-koord { display: flex; gap: 8px; } .cms-map-koord label { flex: 1; } .cms-map-props footer { margin-top: 12px; } .cms-map-props footer button { width: 100%; padding: 8px; border: 1px solid color-mix(in srgb, var(--map-gefahr) 40%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--map-gefahr) 12%, transparent); color: var(--map-gefahr); font: inherit; font-size: 12.5px; cursor: pointer; } .cms-map-props footer button:hover { background: color-mix(in srgb, var(--map-gefahr) 22%, transparent); } .cms-map-hinweis { font-size: 11.5px; line-height: 1.5; opacity: .6; margin: 0 0 10px; } .cms-map-fehler { color: var(--map-gefahr); font-size: 12px; margin-top: 6px; } /* --- Kennwortabfrage am gesperrten Ort ---------------------------------- */ .cms-map-schloss { display: flex; gap: 6px; margin-top: 10px; } .cms-map-schloss input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--map-linie); border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 70%, transparent); color: var(--map-text); font: inherit; font-size: 13px; } .cms-map-schloss button { padding: 8px 14px; border: 0; border-radius: 8px; background: var(--map-akzent); color: var(--map-grund); font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; } /* --- Gruppenfenster ----------------------------------------------------- */ .cms-map-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: color-mix(in srgb, var(--map-grund) 80%, transparent); padding: 20px; } .cms-map-modal-card { width: min(420px, 100%); max-height: 100%; overflow-y: auto; padding: 20px; border: 1px solid var(--map-linie); border-radius: 14px; background: color-mix(in srgb, var(--map-flaeche) 98%, transparent); color: var(--map-text); } .cms-map-modal-card h3 { margin: 0 0 4px; font-size: 15px; } .cms-map-grp { display: flex; gap: 6px; margin-bottom: 6px; } .cms-map-grp [data-g="icon"] { width: 54px; flex: 0 0 54px; text-align: center; } .cms-map-grp [data-g="name"] { flex: 1; min-width: 0; } .cms-map-grp input { padding: 7px 9px; border: 1px solid var(--map-linie); border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 70%, transparent); color: var(--map-text); font: inherit; font-size: 12.5px; } .cms-map-grp [data-weg] { width: 30px; border: 1px solid color-mix(in srgb, var(--map-gefahr) 35%, transparent); border-radius: 8px; background: none; color: var(--map-gefahr); cursor: pointer; font-size: 15px; } .cms-map-mehr { width: 100%; margin-top: 6px; padding: 8px; border: 1px dashed color-mix(in srgb, var(--map-text) 20%, transparent); border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; } .cms-map-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .cms-map-modal-actions button { padding: 8px 16px; border: 1px solid var(--map-linie); border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; } .cms-map-modal-actions button.is-primaer { border-color: transparent; background: var(--map-akzent); color: var(--map-grund); font-weight: 700; } @media (max-width: 640px) { .cms-map-props { width: calc(100% - 24px); top: 52px; } .cms-map-tools { flex-wrap: wrap; max-width: calc(100% - 24px); } } /* Meldung im Karteneditor - ersetzt alert(), das in eingebetteten Ansichten stumm abgeschaltet ist. */ .cms-map-melde { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); max-width: min(420px, calc(100% - 24px)); padding: 11px 16px; border: 1px solid color-mix(in srgb, var(--map-gefahr) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--map-gefahr) 20%, var(--map-flaeche)); color: var(--map-text); font-size: 13px; line-height: 1.45; cursor: pointer; z-index: 11; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); } /* Mitlaufende Koordinatenanzeige im Editor. */ .cms-map-koords { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border: 1px solid var(--map-linie); border-radius: 8px; background: color-mix(in srgb, var(--map-flaeche) 88%, transparent); color: var(--map-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: pre; pointer-events: none; backdrop-filter: blur(6px); z-index: 3; } /* Steht die Legende auch unten links, rückt die Anzeige darüber. */ .cms-map:has(.cms-map-legend) .cms-map-koords { bottom: 56px; } .cms-map-neuland { width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid color-mix(in srgb, var(--map-akzent) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--map-akzent) 12%, transparent); color: var(--map-akzent); font: inherit; font-size: 12.5px; cursor: pointer; transition: background .14s ease; } .cms-map-neuland:hover { background: color-mix(in srgb, var(--map-akzent) 22%, transparent); } /* Farbpunkt im Infofenster eines Bezirks oder einer Straße. */ .cms-map-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: baseline; margin-right: 4px; border: 1px solid color-mix(in srgb, var(--map-text) 30%, transparent); } /* Wert neben einem Regler im Eigenschaftenfenster. */ .cms-map-out { display: block; margin-top: 3px; font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .7; } /* --- Vorschlagen (Mitglieder) ------------------------------------------- */ .cms-map-vorschlag { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 9px 18px; border: 1px solid color-mix(in srgb, var(--map-akzent) 45%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--map-flaeche) 93%, transparent); color: var(--map-akzent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px); z-index: 3; transition: background .15s ease, color .15s ease; } .cms-map-vorschlag:hover { background: color-mix(in srgb, var(--map-akzent) 16%, var(--map-flaeche)); } .cms-map-vorschlag.is-aktiv { background: var(--map-akzent); color: var(--map-grund); border-color: transparent; } /* Die zwei Knöpfe im Infofenster eines Ortes. */ .cms-map-melden { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--map-linie); } .cms-map-melden button { flex: 1; min-width: 118px; padding: 7px 10px; border: 1px solid var(--map-linie); border-radius: 8px; background: none; color: var(--map-gedaempft); font: inherit; font-size: 11.5px; cursor: pointer; transition: border-color .14s ease, color .14s ease; } .cms-map-melden button:hover { border-color: var(--map-akzent); color: var(--map-akzent); } /* Die Meldung nach dem Senden ist keine Fehlermeldung - sie darf nicht rot sein, sonst liest sich ein Dank wie ein Problem. */ .cms-map-melde.is-gut { border-color: color-mix(in srgb, var(--map-akzent) 45%, transparent); background: color-mix(in srgb, var(--map-akzent) 16%, var(--map-flaeche)); color: var(--map-text); } /* --- Wurflinien --------------------------------------------------------- */ .cms-map-throw { cursor: pointer; } .cms-map-throw line { stroke-opacity: .85; transition: stroke-opacity .15s ease; } .cms-map-throw:hover line { stroke-opacity: 1; } .cms-map-throw circle { fill-opacity: 0; } /* Die gewählte Linie hört auf zu stricheln, damit man sie vom Rest unterscheidet, ohne die Farbe zu ändern. */ .cms-map-throw.is-gewaehlt line { stroke-dasharray: none; stroke-opacity: 1; } /* --- Kartenwahl --------------------------------------------------------- */ /* * Oben rechts, damit sie der Suche links nicht ins Gehege kommt. Im Editor * rückt sie unter die Werkzeugleiste. */ .cms-map-wahl { position: absolute; right: 12px; top: 12px; z-index: 4; } .cms-map-wahl select { padding: 8px 12px; border: 1px solid var(--map-linie); border-radius: 10px; background: color-mix(in srgb, var(--map-flaeche) 92%, transparent); color: var(--map-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px); max-width: 210px; } .cms-map-wahl select:focus { outline: none; border-color: var(--map-akzent); } /* Steht das Eigenschaftenfenster rechts, muss die Wahl darüber hinaus. */ .cms-map:has(.cms-map-props:not([hidden])) .cms-map-wahl { top: 12px; right: 12px; } .cms-map:has(.cms-map-tools) .cms-map-props { top: 96px; } @media (max-width: 640px) { .cms-map-wahl { right: 12px; top: 52px; } .cms-map-wahl select { max-width: 150px; } } /* --- Symbolwähler ------------------------------------------------------- */ .cms-map-symfeld { display: flex; gap: 6px; align-items: stretch; } .cms-map-symfeld input { flex: 1; min-width: 0; } .cms-map-symknopf { flex: 0 0 42px; height: 34px; border: 1px solid var(--map-linie); border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 70%, transparent); color: var(--map-text); font-size: 17px; line-height: 1; cursor: pointer; transition: border-color .14s ease; } .cms-map-symknopf:hover { border-color: var(--map-akzent); } .cms-map-symleer { color: var(--map-gedaempft); font-size: 16px; } .cms-map-symwahl { width: min(460px, 100%); } .cms-map-symsuche { width: 100%; margin: 10px 0 12px; padding: 8px 11px; border: 1px solid var(--map-linie); border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 70%, transparent); color: var(--map-text); font: inherit; font-size: 13px; } .cms-map-symsuche:focus { outline: none; border-color: var(--map-akzent); } /* Feste Höhe, damit das Fenster beim Filtern nicht springt. */ .cms-map-symliste { max-height: 46vh; overflow-y: auto; } .cms-map-symgruppe { margin-bottom: 14px; } .cms-map-symgruppe h4 { margin: 0 0 7px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--map-gedaempft); } .cms-map-symraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; } .cms-map-sym { aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px; background: color-mix(in srgb, var(--map-grund) 55%, transparent); font-size: 19px; line-height: 1; cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .12s ease; } .cms-map-sym:hover { border-color: var(--map-akzent); background: color-mix(in srgb, var(--map-akzent) 14%, transparent); transform: scale(1.12); } .cms-map-sym.is-aktiv { border-color: var(--map-akzent); background: color-mix(in srgb, var(--map-akzent) 22%, transparent); } /* Im Gruppenfenster steht der Symbolknopf vor dem Namen. */ .cms-map-grp .cms-map-symknopf { flex: 0 0 44px; } /* Das Sprungziel leuchtet kurz auf - bei 121 Markierungen sieht man sonst nur einen Ausschnitt voller Punkte und weiß nicht, welcher gemeint war. */ @keyframes cmsMapBlinkt { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 14px var(--map-akzent)) brightness(1.5); } } .cms-map .is-blinkt { animation: cmsMapBlinkt .65s ease-in-out 4; } @media (prefers-reduced-motion: reduce) { .cms-map .is-blinkt { animation: none; filter: drop-shadow(0 0 14px var(--map-akzent)); } } /* --- Volle Seitenbreite ------------------------------------------------- */ /* * Der Ausbruch aus dem Container. * * Häufiges Missverständnis: "width: 100vw" allein genügt nicht. Das * Element bleibt im Fluss seiner Spalte stehen, beginnt also erst an * deren linker Kante und ragt um genau diesen Abstand nach rechts aus * dem Bild. Abschnitt, Zeile und Spalte müssen dafür aber nicht selbst * über die volle Breite gehen - dazu ist der negative Rand da: Er zieht * das Element um die halbe Differenz zurück, egal wie schmal und wie * eingerückt der Container ist. * * --vw statt 100vw, weil 100vw die Bildlaufleiste mitzählt. Bei einem * zehn Pixel breiten Balken wäre das Element zehn Pixel zu breit und * säße fünf Pixel neben der Mitte - rechts fehlt ein Streifen, links * steht einer über. theme.js setzt --vw auf die wirklich nutzbare * Breite; der Rückfall gilt nur, solange das Skript nicht geladen ist. */ .cms-voll, .cms-map.is-voll { --breite: var(--vw, 100vw); width: var(--breite); max-width: var(--breite); margin-left: calc(50% - var(--breite) / 2); margin-right: calc(50% - var(--breite) / 2); } /* Bei der Karte fallen die seitlichen Kanten mit weg - ein Rahmen, der an der Bildschirmkante endet, sieht nach Fehler aus, nicht nach Absicht. */ .cms-map.is-voll { border-radius: 0; border-left: 0; border-right: 0; } /* * Die Ecken der Karte, am Baustein einstellbar. * * Nötig, weil dieselbe Karte an zwei völlig verschiedenen Stellen stehen * kann: randlos unter dem Kopfbereich, wo jede Rundung ein Stück Karte * wegschneidet - oder als Kasten mitten auf einer Seite, wo sie richtig * ist. Eine feste Regel wäre an einer der beiden Stellen immer falsch. */ .cms-map.is-ecken-none { border-radius: 0; } .cms-map.is-ecken-soft { border-radius: 8px; } .cms-map.is-ecken-round { border-radius: 24px; } /* Im Builder-Rahmen darf nichts ausbrechen - dort ist die Bühne selbst schon der Bildschirm, und der Ausbruch schöbe es aus dem Bild. */ body[data-builder-preview="1"] .cms-voll, body[data-builder-preview="1"] .cms-map.is-voll { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* === Bildlaufleiste ===================================================== */ /* * Vollständig über Variablen gesteuert, damit sich das Aussehen in den * Einstellungen umstellen lässt, ohne hier etwas anzufassen: * * --scroll-width Breite des Balkens * --scroll-1/2/3 die drei Farben des Verlaufs * --scroll-glow der Schein dahinter, "none" schaltet ihn ab * --scroll-speed Dauer des Durchlaufs, "0s" hält ihn an * * Firefox kann weder Verläufe noch Schein an der Leiste - dort bleibt es * bei einer schmalen Leiste in der ersten Farbe. Das ist kein Mangel der * Umsetzung, sondern die Grenze dessen, was der Browser anbietet. */ /* * Nur fuer Browser ohne ::-webkit-scrollbar - praktisch nur Firefox. * * Wichtig, nicht bloss ordentlich: Sobald scrollbar-color gesetzt ist, * zeichnet Chromium die Standard-Leiste und ignoriert saemtliche * ::-webkit-scrollbar-Regeln darunter. Verlauf, Schein und Animation * waeren dann zwar definiert, aber nie zu sehen - uebrig bliebe ein * einfarbiger Griff auf grauer Bahn. * * @supports not selector(::-webkit-scrollbar) trennt beide Welten: * Chromium und Safari ueberspringen den Block und bekommen die * gestaltete Leiste, Firefox nimmt ihn und bekommt das Beste, was er * anbietet. */ @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--scroll-2, #a74dff) var(--scroll-track, transparent); } } ::-webkit-scrollbar { width: var(--scroll-width, 10px); height: var(--scroll-width, 10px); } ::-webkit-scrollbar-track { background: var(--scroll-track, rgba(255, 255, 255, .04)); border-radius: 99px; } /* * Der Verlauf ist dreimal so hoch wie der Griff und wandert durch ihn * hindurch. Dadurch entsteht die Bewegung, ohne dass sich der Griff selbst * bewegt - er soll ja anzeigen, wo man ist. */ ::-webkit-scrollbar-thumb { border-radius: 99px; background: linear-gradient( 180deg, var(--scroll-1, #ff3fa8), var(--scroll-2, #a74dff) 25%, var(--scroll-3, #20dfe6) 50%, var(--scroll-2, #a74dff) 75%, var(--scroll-1, #ff3fa8) ); background-size: 100% 300%; box-shadow: var(--scroll-glow, 0 0 10px rgba(255, 63, 168, .45)); animation: cmsScrollFluss var(--scroll-speed, 7s) linear infinite; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-size: 100% 200%; filter: brightness(1.2); } ::-webkit-scrollbar-corner { background: transparent; } @keyframes cmsScrollFluss { to { background-position: 0 -300%; } } @media (prefers-reduced-motion: reduce) { ::-webkit-scrollbar-thumb { animation: none; } } /* * In der Karte stört sie: Dort wird mit Ziehen bewegt, nicht gescrollt, * und ein Balken am Rand des Bildes sieht nach Fehler aus. */ .cms-map, .cms-map * { scrollbar-width: none; -ms-overflow-style: none; } .cms-map::-webkit-scrollbar, .cms-map *::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Die Leinwand für die Funken. Sie liegt am rechten Rand, nimmt keine Klicks an und steht unter allem, was bedient wird. */ .cms-scroll-funken { position: fixed; top: 0; right: 0; width: 54px; height: 100vh; pointer-events: none; z-index: 900; } /* === Lichtschleier am Zeiger ============================================ */ /* * Zwei weiche Farbflecken, die dem Zeiger mit unterschiedlicher Trägheit * folgen. Beim Bewegen ziehen sie auseinander, beim Anhalten fließen sie * wieder zusammen - daher der flüssige Eindruck. * * mix-blend-mode: plus-lighter hellt nur auf und verdunkelt nie. Deshalb * bleibt heller Text auf dunklem Grund lesbar, auch wenn der Schleier * darüber liegt. Bei "screen" wäre das ähnlich, aber plus-lighter ist bei * niedriger Deckkraft ruhiger. */ .cms-liquid { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; opacity: var(--fx-liquid-opacity, .18); filter: blur(var(--fx-liquid-blur, 60px)); mix-blend-mode: plus-lighter; transition: opacity .35s ease; will-change: opacity; } .cms-liquid i { position: absolute; top: 0; left: 0; width: var(--fx-liquid-size, 460px); aspect-ratio: 1; border-radius: 50%; will-change: transform; } .cms-liquid [data-a] { background: radial-gradient(circle, var(--scroll-1, #ff3fa8) 0%, transparent 68%); } .cms-liquid [data-b] { width: calc(var(--fx-liquid-size, 460px) * .72); background: radial-gradient(circle, var(--scroll-3, #20dfe6) 0%, transparent 68%); } /* Über der Karte wird er ausgeblendet - dort wird gezogen, und ein wandernder Lichtfleck über dem Kartenbild sieht nach Störung aus. */ .cms-map { position: relative; z-index: 3; } /* --- Aufstellung: Squads mit Spielerkarten ------------------------------- */ /* Scharfe Ecken, keine Radien: Das ist der MOUZ-Zuschnitt. Ein abgerundeter Kasten wirkt freundlich, ein scharfer wirkt sportlich - und darum geht es auf einer Clanseite. */ .cms-squads { display: grid; gap: 64px; } .cms-squads-leer { color: var(--color-muted); font-size: 15px; } .cms-squad-kopf { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 2px solid var(--color-text); } .cms-squad-logo { width: 44px; height: 44px; object-fit: contain; flex: none; } .cms-squad-titel { display: grid; gap: 3px; min-width: 0; } .cms-squad-titel h3 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; text-transform: uppercase; } .cms-squad-spiel { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); } .cms-squad-text { margin: -12px 0 26px; max-width: 640px; color: var(--color-muted); } .cms-squad-leer { color: var(--color-muted); font-size: 14.5px; } /* Die Spaltenzahl kommt als --cms-squad-spalten vom Baustein. auto-fit statt einer festen Zahl waere hier falsch: Der Betreiber soll entscheiden, wie gross die Karten werden - vier schmale und drei breite sind zwei verschiedene Aussagen. */ .cms-squad-liste { display: grid; gap: 2px; grid-template-columns: repeat(var(--cms-squad-spalten, 4), minmax(0, 1fr)); } .cms-spieler { position: relative; overflow: hidden; background: var(--color-surface); } .cms-spieler-bild { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; /* Der Farbton kommt aus dem Namen, nicht aus dem Zufall - derselbe Spieler hat auf jeder Seite dieselbe Farbe. */ background: linear-gradient(160deg, hsl(var(--cms-spieler-ton, 0) 42% 26%) 0%, hsl(calc(var(--cms-spieler-ton, 0) + 26) 38% 13%) 100%); } .cms-spieler-bild span { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: .02em; color: #fff; opacity: .28; transition: opacity .35s ease, transform .35s ease; } .cms-spieler:hover .cms-spieler-bild span { opacity: .42; transform: scale(1.06); } .cms-spieler-nr { position: absolute; top: 0; left: 0; padding: 5px 10px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--color-primary); color: #fff; } .cms-spieler-text { padding: 14px 15px 17px; } .cms-spieler-text h4 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; } .cms-spieler-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .cms-spieler-pos { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); } .cms-spieler-rang { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; color: var(--cms-rang-farbe, var(--color-muted)); border: 1px solid currentColor; } /* Ein Mitglied, dessen Konto geloescht wurde, bleibt sichtbar - aber erkennbar. Es stillschweigend zu verstecken hiesse, dass eine Luecke in der Aufstellung niemandem auffaellt. */ .cms-spieler.is-weg { opacity: .55; } .cms-spieler-weg { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cms-niederlage, #c0392b); } @media (max-width: 900px) { .cms-squad-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .cms-squad-liste { grid-template-columns: 1fr; } .cms-spieler { display: grid; grid-template-columns: 92px 1fr; align-items: center; } .cms-spieler-bild { aspect-ratio: 1; } } /* --- Akkordeon an das Farbschema binden --------------------------------- */ /* Bootstrap faerbt den offenen Kopf hellblau (#cfe2ff) mit dunkelblauer Schrift. In einem weiss/roten Gaming-Schema ist das ein Fremdkoerper - es sah aus, als haette jemand einen Baustein aus einer anderen Website hineinkopiert. Hier greift stattdessen die Akzentfarbe der Seite, damit das Akkordeon in jedem Schema mitwandert. */ .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-text); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 25%, transparent); } /* Der Pfeil ist bei Bootstrap ein eingebettetes blaues SVG. Faerben laesst er sich nur ueber einen Filter - deshalb wird er hier auf die Textfarbe gedreht statt ausgetauscht. */ .accordion-button:not(.collapsed)::after { filter: grayscale(1) brightness(.35); } .accordion-button:focus { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 22%, transparent); } .accordion-item { border-color: var(--color-border); } .accordion-button { color: var(--color-text); } /* === Kalender-Baustein: vier Formen ===================================== */ /* Gemeinsame Grundlage. Die Formen unterscheiden sich in der Anordnung, nicht in der Farbe - damit vier Kalender auf einer Seite wie ein System wirken und nicht wie vier Bausteine. */ .cms-kal { --cms-kal-linie: var(--color-border); } .cms-kal-titel { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); } .cms-kal-leer { margin: 10px 0 0; color: var(--color-muted); font-size: 13.5px; } /* Der Punkt, der "hier ist ein Termin" sagt. */ .cms-kal-punkt { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); font-style: normal; } .cms-kal-punkt.is-event { background: var(--color-muted); } .cms-kal-punkt.is-vorbei { opacity: .38; } /* --- Form: Widget ------------------------------------------------------- */ /* Hoch statt breit, wie die Kachel auf dem Telefon. Feste Mindestbreite, damit es in einer schmalen Spalte nicht zerquetscht wird. */ .cms-kal-widget { min-width: 190px; padding: 18px 18px 20px; border: 1px solid var(--cms-kal-linie); border-radius: var(--radius, 16px); background: var(--color-surface); } .cms-kal-w-kopf { display: flex; justify-content: space-between; align-items: baseline; } .cms-kal-w-monat { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); } .cms-kal-w-tag { font-size: 11px; font-weight: 700; color: var(--color-muted); } .cms-kal-w-zahl { font-size: clamp(2.8rem, 7vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 4px 0 12px; font-variant-numeric: tabular-nums; } .cms-kal-w-feiertag { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; color: var(--color-primary); } .cms-kal-w-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .cms-kal-w-liste li { display: grid; gap: 1px; padding-top: 9px; border-top: 1px solid var(--cms-kal-linie); } .cms-kal-w-liste b { font-size: 13px; font-weight: 700; line-height: 1.25; } .cms-kal-w-liste span { font-size: 11.5px; color: var(--color-muted); } /* --- Form: Woche schmal ------------------------------------------------- */ .cms-kal-w-spanne { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; } .cms-kal-streifen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--cms-kal-linie); border-radius: var(--radius, 12px); overflow: hidden; } .cms-kal-tag { display: grid; justify-items: center; gap: 2px; padding: 9px 2px 8px; border-left: 1px solid var(--cms-kal-linie); min-height: 62px; align-content: start; } .cms-kal-tag:first-child { border-left: 0; } .cms-kal-wt { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); } .cms-kal-tag b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .cms-kal-tag.is-wochenende { background: color-mix(in srgb, var(--color-text) 3%, transparent); } .cms-kal-tag.is-feiertag b { color: var(--color-primary); } .cms-kal-tag.is-heute { background: color-mix(in srgb, var(--color-primary) 12%, transparent); } .cms-kal-tag.is-heute b { color: var(--color-primary); font-weight: 800; } /* --- Form: Monat -------------------------------------------------------- */ .cms-kal-m-kopf { margin-bottom: 10px; } .cms-kal-m-kopf b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .cms-kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--cms-kal-linie); border: 1px solid var(--cms-kal-linie); border-radius: var(--radius, 12px); overflow: hidden; } /* Mit Kalenderwochen kommt eine achte, schmale Spalte davor. */ .cms-kal-raster.hat-kw { grid-template-columns: var(--cms-kal-vor, 34px) repeat(7, minmax(0, 1fr)); } .cms-kal-wt-kopf, .cms-kal-kw-kopf { padding: 7px 0; text-align: center; background: var(--color-surface); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); } .cms-kal-kw { display: grid; place-items: center; background: var(--color-surface); font-size: 10.5px; color: var(--color-muted); font-variant-numeric: tabular-nums; } .cms-kal-zelle { position: relative; min-height: 52px; padding: 6px 7px; background: var(--color-bg); display: grid; align-content: start; gap: 4px; } .cms-kal-zelle b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .cms-kal-zelle.is-fremd { background: var(--color-surface); } .cms-kal-zelle.is-fremd b { opacity: .38; } .cms-kal-zelle.is-wochenende { background: color-mix(in srgb, var(--color-text) 3%, var(--color-bg)); } .cms-kal-zelle.is-feiertag b { color: var(--color-primary); } .cms-kal-zelle.is-heute { background: color-mix(in srgb, var(--color-primary) 13%, var(--color-bg)); } .cms-kal-zelle.is-heute b { color: var(--color-primary); font-weight: 800; } .cms-kal-marken { display: flex; gap: 3px; } /* --- Form: Liste -------------------------------------------------------- */ .cms-kal-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--cms-kal-linie); border: 1px solid var(--cms-kal-linie); border-radius: var(--radius, 12px); overflow: hidden; } .cms-kal-eintrag { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 14px; padding: 12px 14px; background: var(--color-bg); } .cms-kal-e-datum { display: grid; justify-items: center; gap: 0; padding: 6px 0; border-radius: 10px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); } .cms-kal-e-datum span { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); } .cms-kal-e-datum b { font-size: 19px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; } .cms-kal-e-datum small { font-size: 9.5px; color: var(--color-muted); } .cms-kal-e-text { display: grid; gap: 2px; min-width: 0; } .cms-kal-e-text b { font-size: 14.5px; font-weight: 700; line-height: 1.3; } .cms-kal-e-text span { font-size: 12px; color: var(--color-muted); } @media (max-width: 560px) { /* Der Monat wird auf dem Telefon zu klein für sechs Wochen mit Punkten - die Zellen behalten deshalb ihre Höhe und das Raster darf scrollen. */ .cms-kal.is-monat { overflow-x: auto; } .cms-kal.is-monat .cms-kal-raster { min-width: 380px; } .cms-kal-tag { min-height: 54px; } } /* Überschrift im Textbaustein braucht Luft nach oben. Mehrere Textbausteine untereinander ergaben sonst eine Wand: Die Überschrift des zweiten klebte am letzten Absatz des ersten, und man sah nicht, wo ein Abschnitt aufhört. Beim ersten Baustein einer Spalte fällt der Abstand weg - dort wäre er nur eine Lücke unter der Sektion. */ .cms-text-title { margin: 1.7em 0 .5em; } .cms-text:first-child .cms-text-title, .col > .cms-text:first-child .cms-text-title { margin-top: 0; } /* === Suche an das Farbschema binden ==================================== */ /* Die Suchstile stammen aus dem ursprünglichen dunklen Theme und sind dort fest auf Schwarz gesetzt. Auf einer weißen Gaming-Seite klappt damit ein schwarzes Fenster auf - es sieht aus, als gehöre es zu einer anderen Website. Hier folgen Hintergrund, Panel und Schrift dem Schema; auf einem dunklen Schema kommt genau das Schwarz von vorher wieder heraus. */ .site-search-backdrop { background: color-mix(in srgb, var(--color-text) 62%, transparent) !important; backdrop-filter: blur(6px); } .site-search-panel { background: var(--color-bg) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius, 16px); } .site-search-panel h2, .site-search-panel h3, .site-search-panel label { color: var(--color-text) !important; } .site-search-panel input[type="search"], .site-search-panel input[type="text"] { background: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; } .site-search-panel input::placeholder { color: var(--color-muted) !important; } .site-search-panel input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* Die Trefferzeilen */ .search-result { background: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; } .search-result:hover, .search-result:focus-visible { border-color: var(--color-primary) !important; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) !important; } .search-result-title, .search-result strong, .search-result b { color: var(--color-text) !important; } .search-result-text, .search-result small, .search-meta { color: var(--color-muted) !important; } .search-result-arrow { color: var(--color-primary) !important; } /* Der Schließen-Knopf */ .site-search-close { background: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; } .site-search-close:hover { border-color: var(--color-primary) !important; } /* Der Auslöser in der Kopfleiste */ .search-trigger { color: var(--color-text); border-color: var(--color-border); } .search-trigger:hover { border-color: var(--color-primary); color: var(--color-primary); } /* === Match im Einzelnen ================================================= */ /* Die klickbare Zeile in der Liste. Der Verweis überdeckt sie ganz; alles, was selbst bedienbar ist, muss darüber liegen. */ .cms-matchlist-zeile { position: relative; } .cms-matchlist-link { position: absolute; inset: 0; z-index: 1; } .cms-matchlist-zeile > details, .cms-matchlist-zeile .cms-matchlist-statistik { position: relative; z-index: 2; } .cms-matchlist-zeile:hover { border-color: var(--color-primary); } .cms-matchlist-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* --- Kopf: Wappen gegen Wappen ------------------------------------------ */ .cms-md-kopf { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 34px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 16px); } .cms-md-team { display: grid; justify-items: center; gap: 9px; min-width: 0; text-align: center; } .cms-md-wappen { width: 78px; height: 78px; display: grid; place-items: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius, 14px); overflow: hidden; } .cms-md-wappen img { width: 100%; height: 100%; object-fit: contain; padding: 9px; } .cms-md-wappen span { font-size: 21px; font-weight: 800; letter-spacing: .04em; color: var(--color-primary); } .cms-md-team b { font-size: 17px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; } .cms-md-team small { font-size: 11px; letter-spacing: .12em; color: var(--color-muted); } .cms-md-mitte { display: grid; justify-items: center; gap: 6px; } .cms-md-stand { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .cms-md-stand i { font-style: normal; color: var(--color-muted); margin: 0 5px; } .cms-md-vs { font-size: 20px; font-weight: 800; letter-spacing: .16em; color: var(--color-muted); } .cms-md-status { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); } /* --- Fakten als Kacheln ------------------------------------------------- */ .cms-md-fakten { display: grid; gap: 1px; margin-top: 2px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--color-border); border: 1px solid var(--color-border); border-top: 0; } .cms-md-fakt { display: grid; gap: 3px; padding: 14px 16px; background: var(--color-bg); } .cms-md-fakt span { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); } .cms-md-fakt b { font-size: 14.5px; font-weight: 700; } .cms-md-wege { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; } .cms-md-knopf { display: inline-block; padding: 11px 20px; border: 1px solid var(--color-border); border-radius: var(--radius, 10px); background: var(--color-surface); color: var(--color-text); font-size: 13.5px; font-weight: 700; text-decoration: none; } .cms-md-knopf:hover { border-color: var(--color-primary); color: var(--color-primary); } .cms-md-knopf.is-live { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary, #fff); } .cms-md-knopf.is-live:hover { opacity: .9; color: var(--color-on-primary, #fff); } .cms-md-server { padding: 10px 14px; background: var(--color-text); color: var(--color-bg); border-radius: var(--radius, 10px); font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; } /* --- Blöcke ------------------------------------------------------------- */ .cms-md-block { margin-top: 46px; } .cms-md-block > h2 { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted); } .cms-md-tabellen { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .cms-md-tabelle h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; } .cms-md-tabelle table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .cms-md-tabelle th { text-align: right; padding: 8px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); border-bottom: 2px solid var(--color-text); } .cms-md-tabelle th:first-child { text-align: left; } .cms-md-tabelle td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; } .cms-md-tabelle td.cms-md-name { text-align: left; font-weight: 700; } .cms-md-tabelle td.cms-md-name small { display: block; font-weight: 400; font-size: 11.5px; color: var(--color-muted); } .cms-md-tabelle td.cms-md-kda { font-weight: 800; color: var(--color-primary); } .cms-md-tabelle tbody tr:first-child td { background: color-mix(in srgb, var(--color-primary) 7%, transparent); } .cms-md-bericht { max-width: 720px; line-height: 1.75; } .cms-md-bilder { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .cms-md-bilder figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; } .cms-md-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; } .cms-md-zurueck { display: inline-block; margin-top: 44px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); text-decoration: none; } .cms-md-zurueck:hover { text-decoration: underline; } .cms-md-leer { padding: 40px; border: 1px dashed var(--color-border); border-radius: var(--radius, 14px); color: var(--color-muted); text-align: center; } @media (max-width: 620px) { .cms-md-kopf { grid-template-columns: 1fr; gap: 16px; padding: 26px 18px; } .cms-md-wappen { width: 62px; height: 62px; } } /* === Suche: moderne Befehlspalette ===================================== */ /* * Eigene Tokens, nicht die des Schemas. * * Das Gaming-Schema setzt radius:0 - scharfe Ecken sind dort Absicht. Die * Suche soll trotzdem rund sein können, ohne dass man deswegen das ganze * Schema aufweicht. Deshalb hat sie eigene Werte, die im Admin unter * Design einzeln überschrieben werden können. */ :root { --cms-search-radius: 18px; --cms-search-field-radius: 12px; --cms-search-row-radius: 10px; --cms-search-max: 640px; --cms-search-schleier: 58%; } .site-search { align-items: flex-start !important; } .site-search-backdrop { background: color-mix(in srgb, var(--color-text) var(--cms-search-schleier), transparent) !important; backdrop-filter: blur(10px) saturate(120%); } /* Die Palette schwebt oben, nicht über die ganze Höhe. Ein Fenster von 900px Höhe für drei Treffer wirkt wie eine eigene Seite - eine Palette wirkt wie ein Werkzeug, das man gleich wieder zumacht. */ .site-search-panel { width: min(var(--cms-search-max), calc(100vw - 32px)) !important; max-width: min(var(--cms-search-max), calc(100vw - 32px)) !important; height: auto !important; max-height: min(72vh, 640px) !important; margin: clamp(60px, 12vh, 130px) auto 0 !important; padding: 16px !important; display: flex !important; flex-direction: column; gap: 12px; background: var(--color-bg) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--cms-search-radius) !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent), 0 24px 60px -12px color-mix(in srgb, var(--color-text) 28%, transparent); overflow: hidden; } /* Kopfzeile: Marke links, Schließen rechts - klein gehalten. */ .site-search-panel .search-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; } .site-search-panel .member-label { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted); } .site-search-panel .search-close { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--color-border) !important; border-radius: 50% !important; background: var(--color-surface) !important; color: var(--color-muted) !important; font-size: 17px; line-height: 1; cursor: pointer; transition: border-color .18s ease, color .18s ease; } .site-search-panel .search-close:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* Die große Überschrift entfällt - in einer Palette ist das Eingabefeld die Überschrift. Sie kostete 45px Höhe und sagte nichts. */ .site-search-panel h2 { display: none !important; } /* Das Eingabefeld: eine Zeile, Lupe links, ESC rechts. */ .site-search-panel .search-field-wrap { display: flex !important; align-items: center; gap: 11px; padding: 0 14px !important; background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--cms-search-field-radius) !important; transition: border-color .18s ease, box-shadow .18s ease; } .site-search-panel .search-field-wrap:focus-within { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); } .site-search-panel .search-field-wrap svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--color-muted); stroke-width: 2; stroke-linecap: round; } .site-search-panel input[type="search"] { flex: 1; min-width: 0; padding: 15px 0 !important; border: 0 !important; background: transparent !important; color: var(--color-text) !important; font-size: 16px; font-weight: 500; } .site-search-panel input[type="search"]:focus { outline: none !important; } .site-search-panel input::placeholder { color: var(--color-muted) !important; } .site-search-panel input[type="search"]::-webkit-search-cancel-button { display: none; } .site-search-panel kbd { flex: none; padding: 3px 7px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; font-family: inherit; } .site-search-panel .search-meta { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; font-size: 11px; font-weight: 600; color: var(--color-muted) !important; } /* Trefferliste: scrollt innerhalb der Palette, nicht die Seite. */ .site-search-panel .search-results { display: grid; gap: 4px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 4px; } .site-search-panel .search-result { display: grid !important; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 11px 12px !important; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--cms-search-row-radius) !important; color: var(--color-text) !important; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .site-search-panel .search-result:hover, .site-search-panel .search-result:focus-visible { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) !important; border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important; } .site-search-panel .search-result-index { font-size: 10.5px; font-weight: 800; color: var(--color-muted); font-variant-numeric: tabular-nums; } .site-search-panel .search-result h3 { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--color-text) !important; } .site-search-panel .search-result small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary) !important; } .site-search-panel .search-result p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-muted) !important; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .site-search-panel .search-result-arrow { color: var(--color-muted) !important; font-size: 15px; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; } .site-search-panel .search-result:hover .search-result-arrow { opacity: 1; transform: none; color: var(--color-primary) !important; } @media (max-width: 560px) { .site-search-panel { margin-top: 44px !important; padding: 13px !important; } .site-search-panel .search-result { grid-template-columns: 24px 1fr; } .site-search-panel .search-result-arrow { display: none; } } /* --- Zwei feste Farben nachgezogen -------------------------------------- */ /* Beide standen auf #fff. Auf dem roten Schema stimmt das zufällig, auf einem hellen Akzent wäre es unlesbar - deshalb dieselbe Token-Regel wie beim Knopf. */ .cms-spieler-bild span { color: var(--color-on-primary, #fff); } .cms-spieler-nr { color: var(--color-on-primary, #fff); } /* Die Treffertitel folgen der Schrift des Schemas. Sie standen auf var(--display) - im Grundtheme eine Serifenschrift. Jetzt setzen die Schemata --display selbst; diese Regel ist der Gürtel dazu, falls ein eigenes Schema die Angabe auslässt. */ .site-search-panel .search-result h3 { font-family: var(--font-heading, var(--display, inherit)) !important; letter-spacing: -.01em; } /* === Alte Theme-Variablen an die Schema-Variablen hängen ================ */ /* * Das Theme stammt aus der Zeit vor den Farbschemata und hat eigene Namen: * --display und --serif für die Schriften, --gold für die Akzentfarbe. Sie * stehen an dutzenden Stellen im Stylesheet. * * Ohne diese Verkettung ändert der Nutzer im Admin unter Design die Schrift * für Überschriften - und die Hälfte der Seite bleibt auf der alten stehen, * weil sie var(--display) liest. Genau das war bei den Treffern der Suche * zu sehen: Serifen mitten in einer Grotesk-Seite. * * Steht am Ende der Datei, damit es die früheren Festlegungen des Themes * überschreibt. Ein Schema, das --display selbst setzt, gewinnt weiterhin - * seine Werte kommen später als dieses Stylesheet. */ :root { --display: var(--font-heading, 'Archivo', system-ui, sans-serif); --serif: var(--font-body, 'Inter', system-ui, sans-serif); } /* * Akzent und Primärfarbe sind dasselbe, solange nichts anderes gesagt ist. * * Im Admin gibt es das Feld "Akzent" (--color-accent). Meine Bausteine * lesen --color-primary. Ohne diese Zeile ändert ein Nutzer den Akzent und * wundert sich, warum Kalender, Aufstellung und Matchseite ihre alte Farbe * behalten - zwei Farben auf einer Seite, ohne dass er die zweite je * eingestellt hätte. */ :root { --color-primary: var(--color-accent, #d81f2a); } /* * Der Akzent führt - auch gegen das Schema. * * Der erste Versuch (:root) blieb wirkungslos: Die Schemata setzen * --color-primary selbst, und ihr Stilblock steht nach diesem Stylesheet. * Bei gleicher Spezifität gewinnt der spätere. Gemessen: Akzent auf Blau * gestellt, Primärfarbe blieb rot - Knöpfe wären umgesprungen, Kalender, * Aufstellung und Matchseite nicht. * * ":root:root" ist derselbe Knoten, zählt aber als zwei Klassen und schlägt * damit das einfache :root des Schemas. Die Folge ist gewollt: Es gibt * genau EINE Akzentfarbe, und sie steht im Admin unter Design. Ein Schema, * das Akzent und Primärfarbe verschieden setzen will, kann das nicht mehr - * das ist der Preis dafür, dass "eine Farbe ändern" auch wirklich eine * Farbe ändert und nicht anderthalb. */ :root:root { --color-primary: var(--color-accent, #d81f2a); } /* === g-0 muss auch den Theme-Abstand nullen ============================ */ /* * Bootstrap kennt --bs-gutter-x, das Theme benutzt daneben sein eigenes * --gutter: * * :where(.row > [class*="col-"]) { padding-inline: calc(var(--gutter)/2); * margin-bottom: var(--gutter); } * * Die Klasse "g-0" setzt nur Bootstraps Variable auf null. Die des Themes * bleibt stehen - und damit blieben 9,2px Abstand links und rechts sowie * ein Rand nach unten, obwohl die Zeile ausdrücklich auf "randlos" stand. * * Sichtbar war das bei den Bildbändern der Startseite: Kacheln, die von * Kante zu Kante laufen sollen, hatten überall dünne weiße Fugen. Der * Baustein war richtig gebaut, das Stylesheet hat ihn überstimmt. * * Gilt nur für Zeilen, die ausdrücklich g-0 tragen - normale Zeilen * behalten ihren Abstand. */ .row.g-0 > *, .row.g-0 > [class*="col-"] { padding-inline: 0 !important; margin-bottom: 0 !important; } /* === Randlose Bänder: Höhe durchreichen, Rand weg ====================== */ /* * Der Abschnitt bekommt eine Mindesthöhe (min-height: clamp(...)), das Bild * in der Kachel steht auf height:100% und min-height:inherit. Dazwischen * liegen aber Container und Zeile - und die reichten die Höhe nicht weiter. * * Ergebnis: Der Abschnitt war 460px hoch, sein Inhalt 369px, und darunter * standen 91px Weiß. Von außen sah es aus wie ein Abstand zwischen zwei * Bändern; tatsächlich war es leerer Platz innerhalb des ersten. * * :has() greift nur bei Zeilen, die ausdrücklich randlos sind - ein * normaler Abschnitt über die volle Breite behält seinen Innenabstand. */ .cms-voll > [class*="container"]:has(> .row.g-0), .cms-voll > [class*="container"]:has(> .row.g-0) > .row.g-0 { min-height: inherit; } /* Und wirklich bis an die Kante: container-fluid bringt 12px mit. Bei einem Bildband ist das eine weiße Fuge links und rechts - genau das, was ein randloses Band nicht haben soll. */ .cms-voll > [class*="container"]:has(> .row.g-0) { padding-left: 0 !important; padding-right: 0 !important; } /* === Link-in-Bio: schmale Spalte ======================================== */ /* * Eine Link-in-Bio-Seite ist für das Telefon gebaut. Am Rechner gehört sie * als schmale Spalte in die Mitte - läuft der Inhalt über die volle * Website-Breite, sieht sie aus wie eine Unterseite und nicht wie das, was * hinter einem Profil-Link steckt. Gemessen am Original: Knöpfe waren * 1116px breit statt gut 500. * * Der Hintergrund der Abschnitte bleibt voll: Das Kopfbild soll weiterhin * von Kante zu Kante laufen, nur sein Inhalt nicht. */ .cms-bio { --cms-bio-breite: 560px; } .cms-bio .row > [class*="col-"] { max-width: var(--cms-bio-breite); margin-left: auto; margin-right: auto; } /* Der Text darin bleibt lesbar zentriert, wie im Original. */ .cms-bio .cms-text-body { text-align: center; } /* Auf schmalen Geräten hat die Begrenzung nichts zu tun - dort ist der Bildschirm ohnehin schmaler als die Spalte. */ @media (max-width: 620px) { .cms-bio { --cms-bio-breite: 100%; } } /* === Einbettung ========================================================= */ /* Der Rahmen bekommt die volle Breite und eine feste Höhe vom Baustein. Kein aspect-ratio: Ein Podcast-Spieler ist immer gleich hoch, egal wie breit er ist - mit Seitenverhältnis würde er auf dem Telefon zu einem Streifen von 60 Pixeln. */ .cms-embed { width: 100%; } .cms-embed iframe { display: block; width: 100%; border: 0; border-radius: var(--radius, 12px); background: var(--color-surface); } .cms-embed-leer { padding: 26px; text-align: center; color: var(--color-muted); border: 1px dashed var(--color-border); border-radius: var(--radius, 12px); font-size: 14px; } .cms-embed-verweis { margin: 0; } .cms-embed-verweis a { color: var(--color-primary); font-weight: 600; } /* --- Die Fläche, bevor geladen wird -------------------------------------- * * * Sie ist so hoch wie der Rahmen, der später darin steht: Ohne das * springt die halbe Seite nach unten, sobald jemand auf „Laden" klickt - * und wer gerade weiterlesen wollte, verliert seine Stelle. */ /* * Der Grund ist ein Hauch der Schriftfarbe, keine feste Fläche. * * Der erste Versuch nahm --color-surface. Die Variable kann hell oder * dunkel sein, die Schrift erbt aber die Farbe ihres Abschnitts - auf * einer hellen Seite mit dunkler Fläche stand der Titel dann schwarz auf * Schwarz und war schlicht weg. color-mix mit currentColor kann das nicht * passieren: Der Grund ist per Definition ein Verwandter der Schriftfarbe * und liegt damit immer im Kontrast zum Untergrund, nie zur Schrift. */ .cms-embed-warten { display: grid; border: 1px dashed color-mix(in srgb, currentColor 26%, transparent); border-radius: var(--radius, 12px); background: color-mix(in srgb, currentColor 6%, transparent); color: inherit; overflow: hidden; } .cms-embed-laden { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 26px 22px; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; } .cms-embed-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary, #e0b544); color: #15171d; font-size: 17px; /* Der Pfeil sitzt optisch links von der Mitte, weil er spitz zuläuft. */ padding-left: 3px; } .cms-embed-laden b { font-size: 15px; font-weight: 700; color: inherit; } /* Auch hier currentColor statt --color-muted: ein fester Grauton verschwindet auf dunklem Grund, siehe die Bildunterschrift beim Produktbild. */ .cms-embed-laden small { max-width: 42ch; font-size: 12px; line-height: 1.55; color: inherit; opacity: .72; } .cms-embed-knopf { margin-top: 4px; padding: 9px 18px; border-radius: 9px; background: var(--color-primary, #e0b544); color: #15171d; font-size: 13px; font-weight: 700; } .cms-embed-laden:hover .cms-embed-knopf { filter: brightness(1.08); } .cms-embed-laden:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; } @media (prefers-reduced-motion: reduce) { .cms-embed-laden:hover .cms-embed-knopf { filter: none; } } /* Social-Symbole behalten beim Überfahren die Farbe ihrer Umgebung. * * .cms-social-item:hover setzt sonst die Akzentfarbe - auf dem dunklen * Kopfbild werden die Symbole dadurch beim Überfahren dunkler statt * deutlicher. * * Weiß zu erzwingen war der erste Versuch und genauso falsch: Auf der * Link-in-Bio-Seite gibt es ZWEI Reihen - eine auf dem dunklen Kopfbild, * eine weiter unten auf weißem Grund. Weiße Symbole auf weißem Grund sind * beim Überfahren verschwunden. * * "inherit" nimmt die Textfarbe des umgebenden Abschnitts: oben weiß, * unten dunkel. Der Rahmen folgt über currentColor derselben Farbe. Damit * stimmt es auf jedem Untergrund, ohne dass man Reihen unterscheiden muss. */ .cms-bio .cms-social-item:hover, .cms-bio .cms-social-item:focus-visible { color: inherit; border-color: currentColor; } .cms-bio .cms-social-item:hover .cms-social-icon, .cms-bio .cms-social-item:focus-visible .cms-social-icon { color: inherit; } /* === Pillenknopf: Parallaxe aus Punkten beim Überfahren ================ */ /* * Nur Punkte, keine Farbe. * * Der erste Versuch legte das Farbband der Bildlaufleiste über den Knopf - * damit war die eigene Farbe weg, und aus einem schwarzen Knopf wurde ein * blau-cyanfarbener. Das war zu viel: Gewollt ist die Bewegung, nicht der * Anstrich. * * Jetzt ziehen zwei Punktraster über den Knopf, verschieden fein und * verschieden schnell. Das ist der Parallaxe-Eindruck: Zwei Ebenen, die * sich unterschiedlich schnell bewegen, wirken räumlich - dieselbe * Wahrnehmung wie bei einem Hintergrund, der beim Scrollen langsamer läuft * als der Text davor. * * Beide Ebenen sind Weiß mit geringer Deckkraft. Dadurch bleibt die Farbe * des Knopfes sichtbar und der Effekt funktioniert auf jedem Untergrund - * auf Schwarz, auf Magenta, auf Grün. */ .cms-pille { position: relative; overflow: hidden; isolation: isolate; } /* Ebene 1: feines Raster, langsam - das ist die "Ferne" */ .cms-pille.is-punkte::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .45s ease-in-out; background-image: radial-gradient(circle, rgba(255,255,255,.22) .9px, transparent 1.3px); background-size: 9px 9px; animation: cmsPunkteFern 9s linear infinite; animation-play-state: paused; } /* Ebene 2: gröberes Raster, schneller - die "Nähe" */ .cms-pille.is-punkte::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .45s ease-in-out; background-image: radial-gradient(circle, rgba(255,255,255,.30) 1.2px, transparent 1.7px); background-size: 16px 16px; animation: cmsPunkteNah 4.5s linear infinite; animation-play-state: paused; } .cms-pille.is-punkte:hover::before, .cms-pille.is-punkte:focus-visible::before, .cms-pille.is-punkte:hover::after, .cms-pille.is-punkte:focus-visible::after { opacity: 1; animation-play-state: running; } /* Die Wege sind Vielfache der Rastergröße - so springt es beim Neuanfang nicht, sondern läuft nahtlos weiter. */ @keyframes cmsPunkteFern { 0% { background-position: 0 0; } 100% { background-position: 90px 27px; } } @keyframes cmsPunkteNah { 0% { background-position: 0 0; } 100% { background-position: 160px 48px; } } /* Wer weniger Bewegung eingestellt hat, bekommt weder Raster noch Blasen. Das JavaScript für die Blasen steigt ohnehin schon vorher aus - diese Regel fängt den Fall ab, dass eine Leinwand bereits liegt. */ @media (prefers-reduced-motion: reduce) { .cms-pille.is-punkte::before, .cms-pille.is-punkte::after { animation: none !important; } .cms-pille-leinwand { display: none; } } /* Die Leinwand für die Blasen im Knopf. Sie liegt unter der Beschriftung und nimmt keine Klicks an - der Knopf muss anklickbar bleiben, auch mitten in den Blasen. */ .cms-pille-leinwand { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; } /* === Der Verlauf beim Überfahren als eigene Ebene ====================== */ /* * CSS kann nicht von einer Farbe zu einem Verlauf überblenden - ein * Farbwert und ein Bild sind nicht ineinander umrechenbar. Wer den Verlauf * als "background" im :hover setzt, bekommt deshalb einen harten Wechsel, * egal welche Kurve in der transition steht. * * Hier liegt der Verlauf auf einer eigenen Ebene, und überblendet wird * ihre Deckkraft. Das kann CSS, und es sieht aus wie gemeint. * * Nur bei Knöpfen mit Blasen: Die mit Punkten benutzen ::before für ihr * Raster, und sie sollen ihre Farbe ohnehin behalten. */ .cms-pille.is-blasen::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--cms-hover-bg, transparent); opacity: 0; transition: opacity .4s ease-in-out; } .cms-pille.is-blasen:hover::before, .cms-pille.is-blasen:focus-visible::before { opacity: 1; } /* Die Leinwand mit den Blasen liegt über dem Verlauf, aber unter der Beschriftung. */ .cms-pille-leinwand { z-index: -1; } /* Die Leinwand für die Blasen am Zeiger. Über der Seite, aber unter allem, was bedient wird - und ohne Klicks anzunehmen: Ein Effekt, der Knöpfe unbrauchbar macht, wäre schlimmer als gar keiner. */ .cms-zeiger-blasen { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 899; } /* === Rechtliches im Fußbereich ========================================= */ /* * Klein, ruhig, zentriert - es ist Pflichtangabe und kein Inhalt. Wer es * sucht, findet es; wer es nicht sucht, wird nicht davon abgelenkt. */ /* * Der Fuß ist schwarz mit weißer Schrift - unabhängig von der Seite. * * **Warum nicht in den Farben der Seite.** Der Fuß ist der Abschluss, kein * Teil der Gestaltung: Auf einem hellen Hintergrundbild verschwände ein * heller Fuß, auf einem dunklen ein dunkler. Ein fester dunkler Balken * trennt die Seite sauber ab und funktioniert unter jedem Bild. * * Anpassbar bleibt es: Wer im Baukasten Farben am Baustein setzt, gewinnt * gegen diese Vorgabe - deshalb sind es normale Regeln und kein !important. */ /* * Die Maße sind an einem gewachsenen Vorbild abgelesen, nicht geschätzt: * 263px hoch, reines Schwarz, 30px Innenabstand, Links 12px/600 in * Großbuchstaben mit 2,8px Sperrung, das Zeichen 111px breit. Solche * Zahlen wirken beliebig, sind es aber nicht - sie ergeben zusammen einen * Fuß, der ruhig wirkt und trotzdem gefunden wird. */ .cms-legal { text-align: center; padding: 30px 16px; min-height: 263px; display: flex; flex-direction: column; align-items: center; justify-content: center; /* * Kein gap am Fuß selbst. * * Es galt zwischen **allen** Kindern - also auch zwischen Zeichen und * Copyright, wo 68px viel zu viel sind. Die beiden gehören zusammen und * sollen dicht stehen; der große Abstand gehört nur zwischen die Links * und das Zeichen darunter, und den setzt das Zeichen selbst. */ /* 50px Luft zum letzten Baustein - so ausdrücklich gewünscht. Sie steht hier und nicht am Baustein darüber: Der Abstand gehört zum Fuß, nicht zu dem, was zufällig vor ihm liegt. */ margin-top: 50px; background: #000000; color: #ffffff; /* * Von Kante zu Kante - auch aus einer schmalen Spalte heraus. * * Der Baustein steht in der Spalte der Linkseite, und die ist 520px * breit. Ein schwarzer Balken, der dort aufhört, sieht aus wie ein * Kasten mitten auf der Seite; ein Fußbereich muss die ganze Breite * nehmen, sonst ist er kein Abschluss. * * 100vw plus negative Ränder bis zur Fensterkante: Das ist der Weg, der * ohne Kenntnis der umgebenden Breite auskommt. --vw wird vom Theme auf * die Breite ohne Scrollleiste gesetzt; ohne die Variable entsteht sonst * ein waagerechter Überstand von genau deren Breite. */ width: var(--vw, 100vw); max-width: var(--vw, 100vw); margin-left: calc(50% - var(--vw, 100vw) / 2); margin-right: calc(50% - var(--vw, 100vw) / 2); /* * Der Fuß klebt unten. * * Ist die Seite kürzer als das Fenster, soll er trotzdem am unteren * Rand sitzen - nicht mitten im Bild enden und darunter den * Seitenhintergrund zeigen. Ist sie länger, steht er hinter dem Inhalt. * * "margin-top: auto" erledigt das, sobald die Kette darüber eine * Flex-Spalte ist (siehe unten). Der erste Versuch war ein 100vh hoher * Innenabstand - das machte den Balken vom Inhalt bis zum Bildschirmende * durchgehend schwarz, und das war das Gegenteil. */ margin-top: auto; /* * Und trotzdem mindestens 50px Luft zum letzten Baustein. * * "margin-top: auto" frisst allen freien Platz - bei einer kurzen Seite * ist der Abstand dadurch groß, bei einer langen aber **null**: Der Fuß * klebte dann direkt am letzten Knopf. Ein zweiter margin-top geht * nicht, auto gewinnt. * * Ein durchsichtiger oberer Rand löst es: Er nimmt 50px Platz ein, und * background-clip sorgt dafür, dass das Schwarz erst dahinter beginnt - * durch den Rand scheint der Hintergrund der Seite. Ohne den Clip wäre * der Rand schwarz und man sähe nichts davon. */ border-top: 50px solid transparent; background-clip: padding-box; } /* * Die Kette bis zum Fuß. * * Der Baustein steht tief im Baum: body > main > section > row > column. * Damit "margin-top: auto" wirkt, muss jede Stufe eine Flex-Spalte sein, * die den verfügbaren Platz weitergibt - sonst hat der Fuß keinen Raum, * in den er sich schieben könnte. * * :has() greift nur auf Seiten mit Fußbereich, also auf Linkseiten. Eine * normale Website behält ihr Layout unverändert. * * 100dvh statt 100vh: Auf Telefonen ist die Fensterhöhe mit und ohne * eingeblendete Adressleiste verschieden. 100vh rechnet mit der größeren - * der Fuß säße dann ein Stück unterhalb des Sichtbaren. */ /* * Die Mindesthöhe gehört an den body, nicht an main. * * Stand sie an main, war **main** einen Bildschirm hoch - der body aber * höher, weil davor und danach noch Kleinigkeiten stehen. Unter dem * schwarzen Fuß blieb dadurch ein Streifen Seitenhintergrund stehen, genau * so breit wie der Rest. * * Am body mit main als wachsendem Kind stimmt es in jedem Fall: Was sonst * noch im body steht, zählt mit. */ body:has(.cms-legal) { min-height: 100dvh; display: flex; flex-direction: column; } body:has(.cms-legal) > main { flex: 1 1 auto; } /* * Jede Stufe, die den Fuß enthält - egal wie viele es sind. * * Der erste Versuch hatte den Weg fest verdrahtet: * main > section > .row > .col. Zwischen section und row steht aber noch * ein div.container - der Selektor sprang deshalb nie an, und * "margin-top: auto" hatte keinen Raum, in den es hätte schieben können. * Genau das war der Grund, warum der Fuß nicht unten klebte. * * Statt den Weg aufzuzählen wird jede Stufe genommen, die den Fuß * **enthält**. Kommt morgen ein weiteres div dazwischen, stimmt es * weiterhin. */ body:has(.cms-legal) > main, body:has(.cms-legal) main :is(section, div, .row, [class*="col-"]):has(.cms-legal) { display: flex; flex-direction: column; } body:has(.cms-legal) main :is(section, div, .row, [class*="col-"]):has(.cms-legal) { flex: 1 1 auto; } /* * Abschnitte füllen die Breite - auch mit "margin: 0 auto". * * **Der Nebeneffekt der Zeile darüber.** main ist jetzt ein * Flex-Container in Spaltenrichtung. Ein Flex-Element mit automatischen * Seitenrändern verliert dabei die Streckung und misst sich an seinem * Inhalt: Ein Abschnitt mit "max-width: 520px; margin-inline: auto" - * die übliche Schreibweise für eine schmale, mittige Spalte - war in * einem 375px breiten Fenster plötzlich 208px breit. Die Knöpfe darin * standen als schmale Streifen in der Mitte. * * Zu sehen war es nur auf Seiten **mit** Fußbereich, also auf jeder * Linkseite; ohne Fuß greift die Regel oben nicht. Deshalb hier und * nicht in der Vorlage: Sonst müsste jede künftige Vorlage daran denken. */ body:has(.cms-legal) > main > section { width: 100%; } /* Der Fuß selbst darf nicht wachsen - sonst zieht er sich auf die ganze Resthöhe auf, statt sich nach unten zu schieben. */ body:has(.cms-legal) .cms-legal { flex: 0 0 auto; } /* * Und unter dem Fuß darf kein Innenabstand mehr stehen. * * **Der Grund für den Streifen.** Gemessen an der echten Seite: Die Spalte * endete bei 880, die Zeile bei 904, der Abschnitt bei 974. Dazwischen * lagen die Innenabstände der Vorfahren - allein der Abschnitt bringt aus * der Vorlage 70px unten mit, dazu der Zeilenabstand von Bootstrap. * * Der Fuß saß also durchaus am unteren Ende **seiner Spalte** - nur stand * darunter noch der Rand von drei Elternelementen. Deshalb half auch * "margin-top: auto" nicht: Es schiebt innerhalb der Spalte, nicht über * deren Rand hinaus. * * Auf einer Linkseite ist unter dem Fuß nichts mehr, was Abstand bräuchte. */ body:has(.cms-legal) main :is(section, div, .row, [class*="col-"]):has(.cms-legal) { /* * !important, und zwar begründet. * * Der Abschnitt bekommt seinen Innenabstand als **Inline-Stil** aus der * Vorlage ("padding: 80px 0 70px"). Ein Stylesheet schlägt das nicht, * egal wie genau der Selektor ist - gemessen blieben nach dem ersten * Versuch exakt jene 70px unter dem Fuß stehen. * * Der Eingriff ist eng: nur auf Seiten mit Fußbereich, nur an den * Elementen, die ihn enthalten, und nur unten. Oben und an den Seiten * behält die Vorlage ihre Abstände. */ padding-bottom: 0 !important; margin-bottom: 0 !important; } .cms-legal-links { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; } /* Der Trennpunkt entfaellt - bei 26px Abstand und Sperrung trennt der Zwischenraum schon deutlich genug. */ .cms-legal-links span { display: none; } .cms-legal-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 2.8px; text-transform: uppercase; color: inherit; opacity: .9; text-decoration: none; transition: opacity .2s ease; } .cms-legal-link:hover { opacity: 1; } /* Dicht unter dem Zeichen - die beiden gehören zusammen. */ .cms-legal-copy { margin: 8px 0 0; font-size: 12px; opacity: .55; } .cms-legal-leer { margin: 0; font-size: 13px; opacity: .6; } /* * Das Zeichen der Plattform unter den Rechtslinks. * * Klein und gedämpft: Es ist ein Absender, keine Werbefläche. Wer die * Seite besucht, kommt wegen der Links; das Zeichen soll auffindbar sein, * nicht auffällig. * * currentColor im SVG heißt: Es nimmt die weiße Schrift des Fußes an - * ein zweites, helles Logo braucht es dafür nicht. */ .cms-legal-marke { display: inline-block; margin-top: 68px; /* der Abstand zu den Links - am Vorbild gemessen */ color: inherit; opacity: .55; transition: opacity .2s ease; } .cms-legal-marke:hover { opacity: 1; color: inherit; } .cms-legal-marke svg { width: 111px; height: auto; display: block; } /* Das Overlay. Der Browser bringt Verdunkelung und Escape mit - hier steht nur, wie es aussieht. */ .cms-legal-dialog { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: #1a1d21; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); } .cms-legal-dialog::backdrop { background: rgba(0, 0, 0, .55); } .cms-legal-dialog { overflow:hidden; } .cms-legal-dialog[open] { display:flex;flex-direction:column; } .cms-legal-dialog .cms-legal-kopf { flex:none; } .cms-legal-dialog .cms-legal-text { flex:1 1 auto;min-height:0;max-height:none;box-sizing:border-box;overflow-y:auto; } .cms-legal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid #e6e8ec; position: sticky; top: 0; background: inherit; border-radius: 16px 16px 0 0; } .cms-legal-kopf h2 { margin: 0; font-size: 17px; font-weight: 700; } .cms-legal-zu { border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: #6b7280; padding: 0 4px; } .cms-legal-zu:hover { color: #1a1d21; } .cms-legal-text { padding: 20px 22px 26px; overflow-y: auto; max-height: calc(min(80vh, 720px) - 62px); font-size: 14.5px; line-height: 1.65; } .cms-legal-text p { margin: 0 0 14px; } .cms-legal-text p:last-child { margin-bottom: 0; } /* Der Dialog ist immer hell - auch auf einer dunklen Seite. Ein Impressum ist ein Dokument zum Lesen, kein Teil der Gestaltung. */ @media (prefers-reduced-motion: no-preference) { .cms-legal-dialog[open] { animation: cmsLegalAuf .22s ease-out; } } @keyframes cmsLegalAuf { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } /* === Gestapelte Karten ================================================= */ /* * Jeder Abschnitt ist eine Karte, die sich beim Scrollen über die vorige * schiebt: oben abgerundet, mit negativem Rand nach oben. Das ergibt einen * Stapel aus farbigen Blättern statt einer Reihe von Streifen. * * Der Effekt kostet keine Animation und kein JavaScript - er entsteht * allein aus Radius und negativem Abstand. Deshalb funktioniert er auch * bei abgeschalteter Bewegung und auf schwachen Geräten. * * z-index steigt nicht: Eine später stehende Karte liegt im Quelltext * hinter der vorigen und überdeckt sie dadurch von selbst. */ .cms-stapel { position: relative; border-radius: 34px 34px 0 0; margin-top: -34px; padding-top: 84px; padding-bottom: 96px; } /* Die erste Karte hat nichts, worüber sie sich schieben könnte. */ .cms-stapel.is-erste { margin-top: 0; border-radius: 0; } /* Die letzte schließt unten ab, damit der Fuß nicht angeschnitten wirkt. */ .cms-stapel.is-letzte { padding-bottom: 110px; } @media (max-width: 700px) { .cms-stapel { border-radius: 26px 26px 0 0; margin-top: -26px; padding-top: 60px; padding-bottom: 66px; } } /* Die Flächenfarben. Kräftig und flach - keine Verläufe: Ein Stapel aus Verläufen wird unruhig, sobald mehr als zwei übereinanderliegen. */ .cms-flaeche-rot { background: #ff6363; color: #ffffff; } .cms-flaeche-gelb { background: #ffca51; color: #16130a; } .cms-flaeche-gruen { background: #3debb9; color: #05261c; } .cms-flaeche-violett { background: #8e64ff; color: #ffffff; } .cms-flaeche-blau { background: #4f7cff; color: #ffffff; } .cms-flaeche-schwarz { background: #0d0d10; color: #ffffff; } .cms-flaeche-weiss { background: #ffffff; color: #16181d; } .cms-flaeche-sand { background: #f6f4ef; color: #1a1814; } /* Innerhalb einer Fläche erbt alles die Schriftfarbe - sonst stünde eine Überschrift aus dem Farbschema auf einer fremden Farbe. */ [class*="cms-flaeche-"] h1, [class*="cms-flaeche-"] h2, [class*="cms-flaeche-"] h3, [class*="cms-flaeche-"] p, [class*="cms-flaeche-"] li { color: inherit; } /* Eine Überschrift im Stil der Vorlage: groß, fett, eng geführt. */ .cms-stapel h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 18px; } .cms-stapel .cms-augenbraue { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin: 0 0 12px; } /* Das Akkordeon auf einer hellen Karte. * * Es holt seine Farben aus dem Farbschema der Website - auf der sandfarbenen * Karte standen die geschlossenen Fragen dadurch hellgrau auf Weiß und waren * kaum zu lesen. Innerhalb einer Fläche gilt deren Schriftfarbe. */ [class*="cms-flaeche-"] .accordion, [class*="cms-flaeche-"] .accordion-item { background: transparent; border-color: rgba(0, 0, 0, .12); } [class*="cms-flaeche-"] .accordion-button { background: #fff; color: #16181d; font-weight: 600; } [class*="cms-flaeche-"] .accordion-button:not(.collapsed) { background: #16181d; color: #fff; } [class*="cms-flaeche-"] .accordion-body { background: #fff; color: #2a2d33; line-height: 1.65; } /* Auf den dunklen Karten umgekehrt. */ .cms-flaeche-schwarz .accordion-button { background: #1b1d22; color: #fff; } .cms-flaeche-schwarz .accordion-body { background: #14161a; color: #d7dbe2; } /* === Zurück in den Editor ============================================== */ /* * Der runde Knopf oben links auf einer Linkseite - sichtbar nur für den, * der sie bearbeiten darf. Ohne ihn ist die Vorschau eine Einbahnstraße. * * Weiß mit Schatten, damit er sich von jedem Untergrund abhebt: auf einem * dunklen Kopfbild ebenso wie auf einer weißen Fläche. */ .cms-zurueck { position: fixed; top: 20px; left: 20px; z-index: 900; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #14171c; display: grid; place-items: center; text-decoration: none; font-size: 22px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .18s ease; } .cms-zurueck:hover { transform: scale(1.07); color: #14171c; } .cms-zurueck:active { transform: scale(.96); } .cms-zurueck svg { width: 30px; height: auto; display: block; } @media print { .cms-zurueck { display: none; } } /* Ein Link im Fuß trägt dessen Schriftfarbe - auch als . Ohne diese Regel nimmt ein Verweis die Linkfarbe der Seite an und leuchtet im schwarzen Fuß in der Akzentfarbe. */ .cms-legal .cms-legal-link, .cms-legal .cms-legal-link:hover { color: inherit; } .cms-legal .cms-legal-link:hover { opacity: 1; } /* === Namensfeld der Verkaufsseite (Baustein onelink-claim) ============== */ /* * Zwei Pillen nebeneinander: links die Adresse zum Selbstausfüllen, rechts * der Knopf. Auf dem Telefon untereinander - eine Zeile mit Vorsatz, Feld * und Knopf wäre dort dreimal zu eng. * * Die Farben kommen aus currentColor, nicht aus dem Farbschema: Der * Baustein steht mal auf Weiß, mal auf Rot, mal auf Schwarz, und die * Karte gibt die Schriftfarbe bereits vor. */ .cms-claim { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; width: min(620px, 100%); margin: 0 auto; } .cms-claim-feld { flex: 1 1 280px; display: flex; align-items: center; gap: 2px; min-width: 0; padding: 4px 6px 4px 20px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); border-radius: 999px; background: color-mix(in srgb, currentColor 5%, transparent); cursor: text; transition: border-color .18s ease; } .cms-claim-feld:focus-within { border-color: color-mix(in srgb, currentColor 60%, transparent); } .cms-claim-vorsatz { flex: 0 0 auto; font-size: 15px; font-weight: 600; opacity: .55; white-space: nowrap; } .cms-claim-eingabe { flex: 1 1 auto; min-width: 60px; padding: 12px 4px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 700; } .cms-claim-eingabe:focus { outline: none; } .cms-claim-eingabe::placeholder { color: currentColor; opacity: .38; font-weight: 400; } .cms-claim-knopf { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background .2s ease, color .2s ease, transform .2s ease; } .cms-claim-knopf svg { width: 18px; height: 18px; transition: transform .2s ease; } .cms-claim-knopf:hover svg { transform: translateX(4px); } /* Gefüllt beim Überfahren - die Farbe des Untergrunds wird zur Schrift. Deshalb zwei Varianten: Auf einer hellen Fläche wird der Knopf dunkel, auf einer dunklen hell. */ .cms-claim.is-hell .cms-claim-knopf:hover { background: #15171d; color: #fff; border-color: #15171d; } .cms-claim.is-dunkel .cms-claim-knopf:hover { background: #fff; color: #15171d; border-color: #fff; } @media (max-width: 560px) { /* * Untereinander - und dabei die flex-basis zurücknehmen. * * "flex: 1 1 280px" misst entlang der Hauptachse. In der Zeile sind * das 280px Breite, in der Spalte 280px **Höhe**: Aus dem Feld wurde * auf dem Telefon eine handhohe Pille. Genau so gemessen bei 375px * Breite. */ .cms-claim { flex-direction: column; } /* * width:100% zusätzlich zu flex:0 0 auto. * * Ohne das misst sich die Pille an ihrem Inhalt - Vorsatz plus Feld * plus Innenabstand ergaben 400px in einem 375px breiten Fenster, und * die Seite ließ sich seitlich schieben. Der Vorsatz darf dafür * schrumpfen und notfalls kürzen. */ .cms-claim-feld { flex: 0 0 auto; width: 100%; padding-left: 16px; } .cms-claim-vorsatz { min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .cms-claim-knopf { flex: 0 0 auto; justify-content: center; } } /* === Kopfleiste der Plattform (GetOneLink-Verkaufsseite) ================= */ /* * Eine Zeile: Zeichen links, Suche in der Mitte, Anmeldung rechts. * * Die Bausteine liegen alle in **einer** Spalte - der Baukasten setzt sie * sonst untereinander. Deshalb bekommt die Spalte hier flex statt jeder * Baustein eine eigene Zeile. */ /* * Fest und nicht klebend. * * position:sticky war das Naheliegende und blieb wirkungslos: body und * html tragen overflow-x:hidden (das brauchen die randlosen Abschnitte). * Damit ist der Scroll-Container nicht mehr das Fenster, und ein * sticky-Element klebt an einem Kasten, der selbst mitscrollt - der Kopf * war ab dem ersten Scrollen weg. Nachgemessen: top lag bei -2300px. * * fixed loest das, kostet aber den Platz im Fluss. Den gibt die * Innenabstand-Regel darunter zurueck; die Hoehe traegt eine Variable, * weil sie von der Fensterbreite abhaengt. */ .cms-kopfleiste { position: fixed; top: 0; left: 0; right: 0; z-index: 900; } body:has(.cms-kopfleiste) > main { padding-top: var(--kopf-hoehe, 74px); } .cms-kopfleiste .row > [class*="col-"] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Die Suche schiebt sich nach rechts weg, Anmelden und Registrieren bleiben am Ende. */ .cms-kopfleiste .search-trigger { margin-left: auto; } .cms-kopfleiste .cms-marke { display: inline-flex; align-items: center; color: #fff; } .cms-kopfleiste .cms-marke:hover { opacity: .85; } /* Die Suche auf schwarzem Grund - sonst nimmt sie die Farben des Auftritts an und verschwindet. */ .cms-kopfleiste .search-trigger { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; } .cms-kopfleiste .search-trigger:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); } .cms-kopfleiste .search-trigger kbd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; } @media (max-width: 720px) { /* Auf dem Telefon rutscht die Suche in eine eigene Zeile - zu viert nebeneinander bliebe für jedes Element ein Streifen übrig. */ .cms-kopfleiste .row > [class*="col-"] { gap: 10px; } .cms-kopfleiste .search-trigger { order: 9; width: 100%; max-width: none !important; margin-left: 0; } } /* Das Zeichen selbst: Breite steuert der Baustein, die Höhe folgt. */ .cms-marke-bild { display: inline-block; line-height: 0; } .cms-marke-bild svg { width: 100%; height: auto; display: block; } .cms-marke-leer { font-size: 12px; opacity: .7; } /* Der Kopf auf dem Telefon: eine Zeile für Zeichen und Anmeldung, die Suche darunter. Vorher wurden es drei Zeilen - der Kopf war höher als ein Drittel des Bildschirms, bevor die Seite anfing. */ @media (max-width: 720px) { .cms-kopfleiste .cms-marke-bild { width: 88px !important; } .cms-kopfleiste .row > [class*="col-"] { gap: 8px; } .cms-kopfleiste .cms-btn, .cms-kopfleiste a[class*="btn"] { padding: 9px 13px !important; font-size: 11px !important; } /* * Anmelden und Registrieren gehören an den rechten Rand. * * Am Rechner schiebt die Suche sie dorthin (margin-left:auto). Auf dem * Telefon liegt die Suche in einer eigenen Zeile - dadurch klebten die * beiden direkt am Zeichen und standen mitten in der Leiste, ohne * erkennbaren Bezug nach links oder rechts. */ .cms-kopfleiste a.cms-btn.cms-btn-link { margin-left: auto; } /* * "Anmelden" ohne seitlichen Innenabstand. * * Bei 375px standen Zeichen (96) + Anmelden (98) + Registrieren (118) * plus Abstände auf 328px in einer 324px breiten Spalte - vier Pixel * zu viel, und der Kopf wurde dreizeilig und 189px hoch. Es ist ein * Textverweis, kein Knopf; der Rahmen um ihn war ohnehin unsichtbar. */ .cms-kopfleiste a.cms-btn.cms-btn-link { padding: 9px 0 !important; } .cms-kopfleiste .search-trigger { font-size: 12px; padding: 8px 12px; } } /* === Das Anmeldeformular auf einer Plattformseite ====================== */ /* * Es steht in der schwarzen Schlusskarte und holte sich bis hierher die * Farben des Auftritts - auf der Testinstallation also Gold und einen * violetten Rand. Auf einer Seite, die GetOneLink verkauft, ist das die * Handschrift eines fremden Vereins. * * Deshalb hier eigene Farben: weißes Feld, schwarzer Text, weißer Knopf * mit schwarzer Schrift - dieselbe Sprache wie die Kopfleiste. */ .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 26px; } .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) label, .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) legend { color: #fff; } .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) small, .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) .cms-form-hint { color: rgba(255, 255, 255, .55); } .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) :is(input[type="text"], input[type="email"], input[type="password"]) { background: #fff; border: 1px solid rgba(255, 255, 255, .2); color: #15171d; border-radius: 10px; } .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) :is(input:focus) { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; } .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) button[type="submit"], .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) .cms-btn-primary { background: #fff; color: #0d0d10; border: 0; border-radius: 999px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 14px 24px; } .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) button[type="submit"]:hover { background: #e9ecf2; } .cms-flaeche-schwarz :is(.cms-form-register, .cms-form-onelink-register) a { color: #fff; text-decoration: underline; } /* === Häufige Fragen auf einer Stapelkarte ============================== */ /* * Das Akkordeon kommt von Bootstrap und sah entsprechend aus: weiße * Kästen mit Rahmen auf farbigem Grund, beim Aufklappen ein schwarzer * Balken. Drei Farben und zwei Rahmenstärken für eine Liste von Fragen. * * Hier stattdessen: keine Kästen, nur Haarlinien. Die Frage ist groß und * anklickbar, das Zeichen rechts ist ein Plus, das sich beim Öffnen zum * Minus dreht. Alle Farben aus currentColor - damit sitzt es auf Gelb, * Weiß und Schwarz gleichermaßen richtig. */ .cms-stapel .accordion, .cms-stapel .accordion-item { background: transparent !important; border: 0 !important; border-radius: 0 !important; } .cms-stapel .accordion-item + .accordion-item { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important; } .cms-stapel .accordion-item:first-child { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important; } .cms-stapel .accordion-item:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important; } .cms-stapel .accordion-button { background: transparent !important; color: inherit !important; box-shadow: none !important; border-radius: 0 !important; padding: 26px 44px 26px 0 !important; font-size: clamp(1.02rem, 1.9vw, 1.22rem) !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.35; transition: opacity .18s ease; } .cms-stapel .accordion-button:hover { opacity: .62; } .cms-stapel .accordion-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* * Das Pfeilbild von Bootstrap ist ein fest eingefärbtes SVG - auf einer * dunklen Karte wäre es unsichtbar. Deshalb weg damit und ein eigenes * Zeichen aus zwei Strichen, das die Schriftfarbe erbt. */ .cms-stapel .accordion-button::after { display: none !important; } .cms-stapel .accordion-button::before { content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: linear-gradient(currentColor, currentColor) center/16px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 16px no-repeat; transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease; opacity: .75; } .cms-stapel .accordion-button { position: relative; } /* * Offen: nur noch der waagerechte Strich - aus dem Plus wird ein Minus. * * Erst stand hier rotate(90deg) zusammen mit dem Wegnehmen des * senkrechten Strichs. Die Drehung nahm den waagerechten aber mit: Übrig * blieb ein senkrechter Strich, also weder Plus noch Minus. Die halbe * Drehung dreht jetzt nur mit, damit die Bewegung sichtbar bleibt - bei * einem waagerechten Strich sieht man von 180 Grad nichts, deshalb sind * es 90 Grad **weniger** als vorher gedacht: gar keine. */ .cms-stapel .accordion-button:not(.collapsed)::before { background: linear-gradient(currentColor, currentColor) center/16px 2px no-repeat; opacity: 1; } .cms-stapel .accordion-body { background: transparent !important; color: inherit !important; padding: 0 44px 28px 0 !important; font-size: 15.5px; line-height: 1.7; opacity: .78; max-width: 62ch; } /* Die Liste selbst mittig und nicht über die volle Breite - eine Frage über 900px zu lesen kostet mehr Augenbewegung als sie wert ist. */ .cms-stapel .accordion { max-width: 780px; margin-inline: auto; } @media (max-width: 560px) { .cms-stapel .accordion-button { padding: 20px 36px 20px 0 !important; } .cms-stapel .accordion-body { padding: 0 36px 22px 0 !important; font-size: 14.5px; } } /* --- Der Kopf schrumpft beim Scrollen ---------------------------------- */ /* * Sobald man scrollt, ist der Kopf nicht mehr das Wichtigste auf dem * Bildschirm - er soll Platz zurückgeben, aber erreichbar bleiben. * * Die Suche geht als Erstes: Wer scrollt, liest gerade und sucht nicht. * Anmelden und Registrieren bleiben stehen und werden kleiner; sie sind * der Grund, warum die Leiste überhaupt mitfährt. * * Über max-height statt display:none, damit es eine Bewegung ist und * kein Sprung. Die Höhe steht fest, weil auf "auto" nicht animiert wird. */ .cms-kopfleiste { transition: padding .22s ease, background-color .22s ease; } .cms-kopfleiste .search-trigger { transition: max-height .24s ease, opacity .18s ease, margin .24s ease, padding .24s ease, border-width .24s ease; max-height: 44px; overflow: hidden; } .cms-kopfleiste.is-kompakt { padding-top: 6px !important; padding-bottom: 6px !important; } .cms-kopfleiste.is-kompakt .search-trigger { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; pointer-events: none; } .cms-kopfleiste.is-kompakt .cms-marke-bild { width: 74px !important; } .cms-kopfleiste.is-kompakt .cms-btn, .cms-kopfleiste.is-kompakt a[class*="btn"] { padding: 7px 12px !important; font-size: 10.5px !important; } .cms-kopfleiste.is-kompakt a.cms-btn.cms-btn-link { padding: 7px 0 !important; } /* Ein Hauch Trennung nach unten, sobald die Leiste über Inhalt liegt. */ .cms-kopfleiste.is-kompakt { box-shadow: 0 1px 0 rgba(255, 255, 255, .12); } @media (prefers-reduced-motion: reduce) { .cms-kopfleiste, .cms-kopfleiste .search-trigger, .cms-kopfleiste .cms-marke-bild { transition: none; } } /* --- Knöpfe auf einer Stapelkarte stehen mittig ------------------------ */ /* * Überschrift und Text auf diesen Karten sind zentriert, der Knopf aber * ist ein Element im normalen Fluss und stand damit ganz links - unter * einem mittigen Absatz sieht das aus wie ein Versehen, und es war eins. * * width:fit-content statt text-align:center auf der Spalte: Die * dreispaltigen Karten ("1 · Anmelden") sollen linksbündig bleiben, und * text-align auf der Spalte würde die mitziehen. */ /* * display:flex, nicht inline-flex. * * "margin-inline: auto" zentriert nur ein Element auf Blockebene. Mit * inline-flex blieb der Knopf sechs Pixel vom linken Rand stehen und die * Regel sah aus, als griffe sie gar nicht - gemessen: links 6, rechts 124. */ .cms-stapel a.cms-btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } /* Über die volle Breite bleibt über die volle Breite. */ .cms-stapel a.cms-btn.cms-btn-block { width: 100%; } /* In der Kopfleiste nicht - dort ordnet die Zeile selbst. */ .cms-kopfleiste a.cms-btn { margin-left: 0; margin-right: 0; } .cms-kopfleiste a.cms-btn.cms-btn-link { margin-right: 0; } /* === Der drehende Vorschau-Ring ======================================== */ /* * Kleine Linkseiten, die um den Aufmacher wandern. Aufbau in drei Lagen: * * .ol-ring - die Fläche, liegt hinter dem Inhalt * .ol-ring-dreh - dreht sich einmal ganz herum * .ol-ring-platz - jede Karte auf ihrem Winkel, nach außen geschoben * .ol-ring-karte - dreht **gegen** den Ring, damit sie aufrecht bleibt * * Die Gegendrehung ist der ganze Trick: Ohne sie stünden die Karten auf * der unteren Hälfte auf dem Kopf. */ .ol-ring { --ring-radius: 36vmax; --ring-dauer: 70s; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .ol-ring.is-hinten { z-index: 0; } /* * Der Bezugsrahmen des Rings ist der Abschnitt, nicht der Container. * * "inset: 0" misst gegen den nächsten positionierten Vorfahren. Das war * .container - und der ist nur so hoch wie der Text darin: 383px in einem * 782px hohen Abschnitt. Der Ring saß dadurch in der oberen Hälfte, und * von zehn Karten waren vier zu sehen. * * Deshalb steht der Container jetzt static. Der Inhalt muss dann * ausdrücklich über den Ring gehoben werden: Ein positioniertes Element * zeichnet über nicht positionierten Inhalt, gleich in welcher * Reihenfolge er im Dokument steht - ohne diese Regel läge der Ring über * der Überschrift. */ .cms-stapel:has(.ol-ring) { position: relative; } .cms-stapel:has(.ol-ring) > .container { position: static; } .cms-stapel:has(.ol-ring) .row > [class*="col-"] > *:not(.ol-ring) { position: relative; z-index: 1; } .ol-ring-dreh { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: ol-ring-dreh var(--ring-dauer) linear infinite; } .ol-ring-platz { position: absolute; left: 0; top: 0; transform: rotate(var(--w)) translateY(calc(-1 * var(--ring-radius))); } .ol-ring-karte { --breite: 96px; position: absolute; left: calc(var(--breite) / -2); top: calc(var(--breite) / -1.4); width: var(--breite); padding: 10px 9px 12px; border-radius: 13px; box-shadow: 0 12px 34px rgba(0, 0, 0, .16); display: flex; flex-direction: column; align-items: center; gap: 5px; /* Gegendrehung: erst die eigene Neigung, dann zurück gegen den Ring. */ transform: rotate(calc(-1 * var(--dreh))) rotate(var(--neigung)); animation: ol-ring-gegen var(--ring-dauer) linear infinite; } /* Die Bestandteile einer Mini-Linkseite: Bild, zwei Zeilen, drei Knöpfe. Alles aus currentColor, damit es auf jeder Kartenfarbe sitzt. */ .ol-ring-bild { width: 26px; height: 26px; border-radius: 50%; background: currentColor; opacity: .9; margin-bottom: 2px; } .ol-ring-zeile { height: 4px; border-radius: 2px; background: currentColor; } .ol-ring-zeile.is-name { width: 62%; opacity: .85; } .ol-ring-zeile.is-bio { width: 44%; opacity: .45; margin-bottom: 3px; } .ol-ring-knopf { width: 100%; height: 11px; border-radius: 6px; background: currentColor; opacity: .16; } @keyframes ol-ring-dreh { to { transform: rotate(360deg) } } @keyframes ol-ring-gegen { to { transform: rotate(calc(-1 * var(--dreh) - 360deg)) rotate(var(--neigung)) } } /* * Auf dem Telefon kleiner und näher am Rand. * * vmax rechnet sich dort aus der Höhe - der Ring wäre sonst so weit * draußen, dass nur noch Ecken zu sehen sind. */ @media (max-width: 720px) { /* * Weiter nach außen und blasser. * * vmax rechnet auf dem Telefon aus der **Höhe** - 30vmax waren bei * 375×812 rund 244px, und damit lagen die Karten mitten in der * Überschrift. Der Text stand zwar darüber, aber lesbar war er nicht. * * 46vmax schiebt sie an den Rand, die halbe Deckkraft nimmt ihnen die * Konkurrenz zum Text. Sie sollen andeuten, worum es geht, nicht * mitlesen. */ .ol-ring { --ring-radius: 46vmax; opacity: .5; } .ol-ring-karte { --breite: 68px !important; } } /* Wer Bewegung abgestellt hat, bekommt den Ring still - nicht weg. Das Bild trägt die Aussage, die Drehung ist Zugabe. */ @media (prefers-reduced-motion: reduce) { .ol-ring-dreh, .ol-ring-karte { animation: none; } } /* Eine Karte mit echtem Bild: kein Innenabstand, das Bild füllt sie. */ .ol-ring-karte.is-bild { padding: 0; overflow: hidden; } .ol-ring-karte.is-bild img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; } /* === Free gegen Pro ==================================================== * * * Zwei Karten, eine hell und eine dunkel. Feste Farben statt Tokens, aus * demselben Grund wie beim Produktbild darunter: Die Karten stehen mal auf * weißem, mal auf violettem, mal auf schwarzem Abschnitt, und ein Paar aus * hell und dunkel hebt sich auf jedem davon voneinander ab. */ .ol-tarife { --tarif-hell: #ffffff; --tarif-dunkel: #131519; --tarif-linie: #e6e4df; --tarif-text: #15171d; --tarif-leise: #6f7079; max-width: 920px; margin-inline: auto; } .ol-tarife-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; /* Gleich hoch, egal wie viele Zeilen eine Karte hat - sonst steht der eine Knopf auf halber Höhe des anderen. */ align-items: stretch; } .ol-tarif-karte { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border: 1px solid var(--tarif-linie); border-radius: 18px; background: var(--tarif-hell); color: var(--tarif-text); box-shadow: 0 18px 44px rgba(0, 0, 0, .10); } .ol-tarif-karte.is-hervor { background: var(--tarif-dunkel); /* Ein heller Haarstrich statt der eigenen Farbe: Auf schwarzem Abschnitt trägt der Schatten nichts, und ohne Kante zerfließt die Karte in den Hintergrund. Auf hellem Grund fällt der Strich nicht auf, weil dort schon die Fläche den Unterschied macht. */ border-color: rgba(255, 255, 255, .12); color: #fff; box-shadow: 0 26px 60px rgba(0, 0, 0, .34); } .ol-tarif-marke { position: absolute; top: -11px; left: 26px; padding: 4px 11px; border-radius: 999px; background: var(--color-accent, #e0b544); color: #15171d; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .ol-tarif-oben { margin-bottom: 20px; } .ol-tarif-name { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tarif-leise); margin-bottom: 8px; } .ol-tarif-karte.is-hervor .ol-tarif-name { color: var(--color-accent, #e0b544); } .ol-tarif-preis { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .ol-tarif-unter { display: block; margin-top: 5px; font-size: 12.5px; color: var(--tarif-leise); } .ol-tarif-karte.is-hervor .ol-tarif-unter { color: rgba(255, 255, 255, .62); } .ol-tarif-text { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--tarif-leise); } .ol-tarif-karte.is-hervor .ol-tarif-text { color: rgba(255, 255, 255, .8); } .ol-tarif-liste { list-style: none; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--tarif-linie); /* Schiebt den Knopf ans untere Ende, damit beide auf einer Linie stehen - auch wenn eine Karte eine Zeile mehr hat. */ flex: 1 1 auto; } .ol-tarif-karte.is-hervor .ol-tarif-liste { border-top-color: rgba(255, 255, 255, .16); } .ol-tarif-liste li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--tarif-linie); } .ol-tarif-karte.is-hervor .ol-tarif-liste li { border-bottom-color: rgba(255, 255, 255, .1); } .ol-tarif-liste li:last-child { border-bottom: 0; } .ol-tarif-liste li > span { color: var(--tarif-leise); } .ol-tarif-karte.is-hervor .ol-tarif-liste li > span { color: rgba(255, 255, 255, .72); } .ol-tarif-liste li > b { font-weight: 700; text-align: right; } /* Was fehlt, wird nicht durchgestrichen - nur zurückgenommen. Ein durchgestrichenes Merkmal liest sich wie ein Fehler. */ .ol-tarif-liste li.is-fehlt { opacity: .48; } .ol-tarif-ja { color: #12805a; font-weight: 800; } .ol-tarif-karte.is-hervor .ol-tarif-ja { color: #3ddc9a; } .ol-tarif-nein { color: var(--tarif-leise); font-weight: 700; } .ol-tarif-knopf { display: block; padding: 13px 18px; border-radius: 10px; background: var(--tarif-dunkel); color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: transform .16s ease, opacity .16s ease; } .ol-tarif-karte.is-hervor .ol-tarif-knopf { background: var(--color-accent, #e0b544); color: #15171d; } .ol-tarif-knopf:hover { transform: translateY(-1px); opacity: .92; color: #fff; } .ol-tarif-karte.is-hervor .ol-tarif-knopf:hover { color: #15171d; } .ol-tarife-fuss { margin: 20px 0 0; text-align: center; font-size: 12.5px; /* Wie beim Produktbild: die Schriftfarbe des Abschnitts, nur gedämpft - ein fester Grauton verschwindet auf dunklem Grund. */ color: currentColor; opacity: .72; line-height: 1.6; } @media (max-width: 720px) { /* Untereinander, und die empfohlene Karte zuerst: Auf dem Telefon sieht man die zweite erst nach dem Wischen, und das ist die falsche Reihenfolge für die, die man verkaufen will. */ .ol-tarife-gitter { grid-template-columns: 1fr; gap: 26px; } .ol-tarif-karte.is-hervor { order: -1; } .ol-tarif-preis { font-size: 34px; } .ol-tarif-karte { padding: 26px 20px 22px; } } @media (prefers-reduced-motion: reduce) { .ol-tarif-knopf { transition: none; } .ol-tarif-knopf:hover { transform: none; } } /* === Das Produktbild =================================================== * * * Ein Fensterrahmen mit einer nachgebauten Oberfläche darin. Er ist immer * hell, auch auf schwarzem Abschnitt: Das Panel ist hell, und ein * eingefärbtes Produktbild zeigt etwas, das es so nicht gibt. Deshalb * stehen hier feste Farben und keine Tokens - dieselbe Überlegung wie beim * Cookie-Hinweis, der aus demselben Grund seine eigene Palette hat. */ .ol-shot { --shot-grund: #ffffff; --shot-linie: #e6e4df; --shot-text: #15171d; --shot-leise: #6f7079; margin: 0; max-width: 620px; margin-inline: auto; } .ol-shot-fenster { border: 1px solid var(--shot-linie); border-radius: 14px; background: var(--shot-grund); color: var(--shot-text); overflow: hidden; /* Zwei Schatten: der weiche trägt, der harte zeichnet die Kante nach. Auf schwarzem Grund verschwände ein einzelner weicher Schatten. */ box-shadow: 0 24px 60px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .16); } .ol-shot.is-gekippt .ol-shot-fenster { transform: perspective(1400px) rotateX(4deg) rotateY(-7deg) rotate(.6deg); transform-origin: 50% 100%; } .ol-shot-leiste { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--shot-linie); background: #f6f5f2; } .ol-shot-punkt { width: 8px; height: 8px; border-radius: 50%; background: #d8d6d0; flex: none; } .ol-shot-adresse { flex: 1 1 auto; margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--shot-linie); font-size: 11px; color: var(--shot-leise); /* Eine lange Adresse darf das Fenster nicht breiter machen. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ol-shot-inhalt { padding: 16px 18px 18px; } .ol-shot-foto { display: block; width: 100%; height: auto; } .ol-shot-kopf { margin-bottom: 12px; } .ol-shot-kopf b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .ol-shot-kopf small { font-size: 11px; color: var(--shot-leise); } .ol-shot-reiter { display: flex; gap: 18px; border-bottom: 1px solid var(--shot-linie); margin-bottom: 12px; } .ol-shot-reiter span { padding-bottom: 8px; font-size: 12px; color: var(--shot-leise); border-bottom: 2px solid transparent; margin-bottom: -1px; } .ol-shot-reiter .is-aktiv { color: var(--shot-text); font-weight: 700; border-bottom-color: var(--color-accent, #e0b544); } .ol-shot-zeile { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--shot-linie); border-radius: 10px; } .ol-shot-zeile + .ol-shot-zeile { margin-top: 8px; } .ol-shot-avatar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent, #e0b544); color: #15171d; font-size: 10px; font-weight: 800; } /* min-width:0, damit ein langer Name die Marken nicht hinausschiebt. */ .ol-shot-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; } .ol-shot-text b { font-size: 12.5px; font-weight: 700; } .ol-shot-text small { font-size: 10.5px; color: var(--shot-leise); } .ol-shot-marken { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; } .ol-shot-marke { padding: 2px 6px; border-radius: 4px; background: #f0efec; color: var(--shot-leise); font-size: 8.5px; font-weight: 700; letter-spacing: .09em; } .ol-shot-marke.is-pro { background: #15171d; color: #fff; } .ol-shot-marke.is-free { background: #f0efec; color: var(--shot-leise); } /* --- Ansicht „Auftritt & Tarif" ------------------------------------- */ .ol-shot-wert { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--shot-linie); font-size: 12px; } .ol-shot-wert span { color: var(--shot-leise); font-size: 11px; } .ol-shot-wert b { font-weight: 700; } .ol-shot-angebot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--shot-linie); } .ol-shot-cta { flex: none; padding: 7px 14px; border-radius: 8px; background: var(--color-accent, #e0b544); color: #15171d; font-size: 11px; font-weight: 800; } /* --- Ansicht „Editor" ------------------------------------------------ */ .ol-shot-editor { display: grid; grid-template-columns: 1fr 132px; gap: 14px; } .ol-shot-spalte-kopf { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--shot-leise); text-transform: uppercase; margin-bottom: 8px; } .ol-shot-baustein { padding: 8px 10px; border: 1px solid var(--shot-linie); border-radius: 8px; } .ol-shot-baustein + .ol-shot-baustein { margin-top: 6px; } .ol-shot-baustein b { display: block; font-size: 11.5px; font-weight: 700; } .ol-shot-baustein small { font-size: 10px; color: var(--shot-leise); } .ol-shot-telefon { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border: 1px solid var(--shot-linie); border-radius: 16px; background: #faf9f7; } .ol-shot-portrait { width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent, #e0b544); } .ol-shot-name { font-size: 10px; font-weight: 700; margin-bottom: 2px; } .ol-shot-knopf { width: 100%; padding: 6px 4px; border-radius: 7px; background: #15171d; color: #fff; font-size: 9px; font-weight: 600; text-align: center; } /* Die Unterschrift erbt die Schriftfarbe ihres Abschnitts und wird nur gedämpft - mit --color-muted stand sie auf der violetten und der schwarzen Fläche als dunkles Grau auf dunklem Grund und war nicht zu lesen. currentColor kann das nicht passieren: Es ist per Definition die Farbe, in der der Abschnitt ohnehin schreibt. */ .ol-shot figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; color: currentColor; opacity: .72; line-height: 1.55; } @media (max-width: 640px) { /* Gekippt auf einem schmalen Bildschirm heißt: halb abgeschnitten. */ .ol-shot.is-gekippt .ol-shot-fenster { transform: none; } .ol-shot-inhalt { padding: 12px 12px 14px; } .ol-shot-editor { grid-template-columns: 1fr 108px; gap: 10px; } .ol-shot-angebot { flex-wrap: wrap; } } /* === Der Zitat-Wechsler ================================================ */ /* * Alle Folien liegen übereinander, nur eine ist sichtbar. Die Bühne * bekommt ihre Höhe von der höchsten - sonst springt der Abschnitt bei * jedem Wechsel, weil das nächste Zitat kürzer ist. */ .ol-stimmen { max-width: 760px; margin-inline: auto; text-align: center; } .ol-stimmen-buehne { display: grid; align-items: center; } .ol-stimme { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); pointer-events: none; } .ol-stimme.is-aktiv { opacity: 1; transform: none; pointer-events: auto; } .ol-stimme blockquote { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.75rem); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; } /* Anführungszeichen als Teil des Satzes, nicht als Dekoration daneben. */ .ol-stimme blockquote::before { content: "„"; } .ol-stimme blockquote::after { content: "\201C"; } .ol-stimme figcaption { margin-top: 16px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .55; } .ol-stimmen-punkte { display: flex; justify-content: center; gap: 9px; margin-top: 28px; } .ol-stimmen-punkt { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: .25; cursor: pointer; transition: opacity .2s ease, transform .2s ease; } .ol-stimmen-punkt:hover { opacity: .55; } .ol-stimmen-punkt.is-aktiv { opacity: 1; transform: scale(1.35); } .ol-stimmen-punkt:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .ol-stimmen.is-leer { opacity: .6; font-size: 13px; } @media (prefers-reduced-motion: reduce) { .ol-stimme { transition: none; } } /* === Kontobereich in der Kopfleiste ==================================== */ .ol-konto { display: flex; align-items: center; gap: 12px; margin-left: auto; } .ol-konto-link { color: inherit; text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: .85; transition: opacity .18s ease; } .ol-konto-link:hover { opacity: 1; color: inherit; } .ol-konto-knopf { display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px; background: #ffffff; color: #0d0d10; text-decoration: none; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background .18s ease, transform .18s ease; } .ol-konto-knopf:hover { background: #e9ecf2; color: #0d0d10; transform: translateY(-1px); } @media (max-width: 720px) { .ol-konto { gap: 10px; } .ol-konto-link { font-size: 11px; } .ol-konto-knopf { padding: 9px 14px; font-size: 11px; } } /* Zusammengeschoben beim Scrollen - wie die übrigen Teile der Leiste. */ .cms-kopfleiste.is-kompakt .ol-konto-knopf { padding: 7px 14px; font-size: 10.5px; } .cms-kopfleiste.is-kompakt .ol-konto-link { font-size: 10.5px; } /* === Formulare: mittig, und in der Farbe ihres Abschnitts ============== */ /* * **Zwei Fehler, die zusammengehören.** * * Erstens standen Formulare linksbündig. Sie haben max-width:480px, aber * keinen automatischen Rand - auf einer Seite, deren Überschrift und Text * mittig sind, klebte der Kasten am linken Rand. * * Zweitens nahm der Knopf im Formular --color-accent, also den Akzent der * **Installation**. Auf der violetten Musik-Vorlage war der Knopf damit * goldgelb: die Farbe von La Manada, mitten in einer fremden Seite. * * --cms-akzent ist die Antwort auf beides: Ein Abschnitt setzt ihn einmal, * und alles darin folgt - Formularknopf wie Linkliste. Ohne Angabe bleibt * es beim Akzent der Website, was für eine Seite richtig ist, die zum * Auftritt gehört. */ .cms-form { margin-left: auto; margin-right: auto; } .cms-form .cms-btn-primary, .cms-form button[type="submit"] { background: var(--cms-akzent, var(--color-accent)); border-color: var(--cms-akzent, var(--color-accent)); color: var(--cms-akzent-schrift, var(--color-on-primary, #0b0d12)); } .cms-form .cms-btn-primary:hover, .cms-form button[type="submit"]:hover { background: color-mix(in srgb, var(--cms-akzent, var(--color-accent)) 86%, #000); } .cms-form-feld input:focus { outline-color: var(--cms-akzent, var(--color-accent)); } .cms-form-fuss a { color: var(--cms-akzent, var(--color-accent)); } /* Die Linkliste hört auf denselben Ton, wenn keiner eigens gesetzt ist - damit reicht eine Angabe je Abschnitt für die ganze Seite. */ .cms-linkliste.is-fill .cms-link { background: var(--cms-link-bg, var(--cms-akzent, var(--color-primary, #6c5ce7))); border-color: var(--cms-link-bg, var(--cms-akzent, var(--color-primary, #6c5ce7))); } /* * Luft über einem Formular. * * Es steht fast immer als letzter Block in einem Abschnitt, direkt unter * Text oder einer Liste. Ohne diesen Rand beginnt der Kasten unmittelbar * an der Zeile darüber. * * Der Abstand **zwischen Abschnitten** steht dagegen nicht hier: Die * Vorlagen setzen ihr Polster als Inline-Stil am Abschnitt, und Inline * schlägt jede Regel aus dem Stylesheet. Eine Regel hier wäre genau dort * wirkungslos, wo sie gebraucht würde - deshalb sind die Abstände in den * Vorlagen selbst korrigiert. */ .cms-form { margin-top: 28px; } .cms-form:first-child { margin-top: 0; } /* === Bausteine in mehreren Spalten ===================================== */ /* * Der Kunde stellt eine Zahl von 1 bis 4 ein, sonst nichts. Was auf einem * schmalen Bildschirm daraus wird, entscheidet diese Datei - er soll über * Bildschirmbreiten nicht nachdenken müssen. * * Als Raster an der **vorhandenen** Spalte und nicht als neuer Baustein: * Der Frontend-Editor zeigt eine flache Liste und kennt keine * Verschachtelung. Ein Behälter wäre dort ein Baustein, in den man nichts * hineinbekommt. So verteilt sich einfach, was ohnehin schon da ist. */ .cms-spalten-2, .cms-spalten-3, .cms-spalten-4 { display: grid; gap: 18px 22px; align-items: start; } .cms-spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cms-spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cms-spalten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* * Zwei Stufen nach unten, nicht eine. * * Vier Spalten auf einem Tablet sind vier Streifen; direkt auf eine zu * springen verschenkt dagegen die Breite. Deshalb dazwischen zwei. */ @media (max-width: 900px) { .cms-spalten-3, .cms-spalten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cms-spalten-2, .cms-spalten-3, .cms-spalten-4 { grid-template-columns: minmax(0, 1fr); } } /* * Was über die ganze Breite gehört, bleibt über die ganze Breite. * * Ein Profilkopf oder der Fußbereich in einer von vier Spalten wäre * Unsinn - sie gehören der Seite, nicht einer Spalte. Die Linkliste * ebenso: Sie ist selbst schon eine Liste. */ :is(.cms-spalten-2, .cms-spalten-3, .cms-spalten-4) > :is(.cms-profil, .cms-legal, .cms-linkliste) { grid-column: 1 / -1; } /* Ein leerer Social-Baustein - nur für den, der die Seite bearbeiten darf. Er wäre sonst unsichtbar und damit nicht mehr anzuklicken. */ .cms-socials-empty { padding: 14px 18px; border: 1px dashed color-mix(in srgb, currentColor 34%, transparent); border-radius: 12px; font-size: 13px; opacity: .6; text-align: center; } /* === Wo die Beschriftung im Linkknopf steht ============================ */ /* Icon und Beschriftung werden bei mittiger Ausrichtung gemeinsam zentriert. Der dekorative Pfeil bleibt rechts; symmetrischer Innenabstand hält mehrzeilige Beschriftungen von ihm fern. */ .cms-linkliste.is-a-links .cms-link-text { text-align: left; } .cms-linkliste.is-a-mitte .cms-link-text { text-align: center; } .cms-linkliste.is-a-rechts .cms-link-text { text-align: right; } .cms-linkliste.is-a-mitte .cms-link { position: relative; justify-content: center; padding-inline: 48px; } .cms-linkliste.is-a-mitte .cms-link-text { flex: 0 1 auto; padding-inline: 0; } .cms-linkliste.is-a-mitte .cms-link-pfeil { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } .cms-linkliste.is-large.is-a-mitte .cms-link { padding-inline: 52px; } .cms-linkliste.is-large.is-a-mitte .cms-link-pfeil { right: 20px; } /* === Die Adresszeile im Anmeldeformular ================================ */ /* * "deine-adresse.de/@ ____" als ein Feld - derselbe Gedanke wie im * Aufmacher: Man sieht, was am Ende herauskommt, während man tippt. */ .cms-form-adresse { display: flex; align-items: center; gap: 2px; padding-left: 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); overflow: hidden; } .cms-form-adresse:focus-within { outline: 2px solid var(--color-accent); outline-offset: 1px; } .cms-form-vorsatz { flex: 0 0 auto; font-size: 13.5px; opacity: .6; white-space: nowrap; } .cms-form-adresse input { flex: 1 1 auto; min-width: 60px; border: 0 !important; background: none !important; outline: none !important; padding: 11px 12px 11px 2px !important; } /* Auf der schwarzen Schlusskarte: heller Rahmen, weißes Feld. * * Das Feld wird weiß, die Schrift darin nicht: Sie erbt die helle Farbe * des dunklen Abschnitts und stand als blasses Grau auf Weiß - der * getippte Name sah aus wie ein Platzhalter. Deshalb bekommt der Eingabe- * text dieselbe dunkle Farbe wie der Vorsatz. */ .cms-flaeche-schwarz .cms-form-adresse { background: #fff; border-color: rgba(255, 255, 255, .2); } .cms-flaeche-schwarz .cms-form-vorsatz, .cms-flaeche-schwarz .cms-form-adresse input { color: #15171d; } /* Der Platzhalter muss sich vom Getippten unterscheiden - sonst ist die Reparatur oben umsonst. */ .cms-flaeche-schwarz .cms-form-adresse input::placeholder { color: #15171d; opacity: .42; } @media (max-width: 420px) { /* Bei sehr schmalen Fenstern frisst der Vorsatz das Feld auf. */ .cms-form-vorsatz { font-size: 12px; } } .ol-pro-soon{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;background:#112c23;color:#f4f5dc;padding:64px;border-radius:30px;margin:40px auto;max-width:1180px;overflow:hidden}.ol-pro-soon-badge{display:inline-block;padding:9px 14px;border:1px solid #b9d87960;border-radius:30px;font-size:11px;letter-spacing:2px}.ol-pro-soon h2{font-size:clamp(36px,5vw,66px);letter-spacing:-2px;line-height:1.05;margin:28px 0 22px;color:inherit}.ol-pro-soon p{font-size:17px;line-height:1.7;color:#d6e1d1}.ol-pro-soon-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.ol-pro-soon-tags span{font-size:11px;padding:8px 10px;background:#ffffff12;border-radius:8px}.ol-pro-soon a{display:inline-block;color:#13281f;background:#d9f28d;text-decoration:none;padding:15px 22px;border-radius:30px;font-weight:700}.ol-pro-soon small{display:block;color:#c2d0bf;font-size:11px;margin-top:16px}.ol-pro-soon-visual{align-self:center;transform:rotate(-4deg);padding:30px;background:linear-gradient(145deg,#d9f28d,#81ba94);color:#173328;border-radius:22px;box-shadow:18px 22px 0 #071e1660}.ol-pro-soon-visual>span{font-size:10px;letter-spacing:2px}.ol-pro-soon-visual strong{display:flex;align-items:center;gap:16px;font-size:76px;letter-spacing:-5px;margin:24px 0}.ol-pro-soon-visual strong span{font-size:15px;letter-spacing:1px;line-height:1.3}.ol-pro-soon-visual>div{margin-top:12px;background:#ffffff80;padding:13px;border-radius:10px;font-size:13px}@media(max-width:760px){.ol-pro-soon{grid-template-columns:1fr;padding:30px 22px;gap:30px;margin:20px 10px}.ol-pro-soon-visual{transform:none}} .cms-name-feedback{font-size:13px;line-height:1.6;margin:10px 0;max-width:680px}.cms-name-feedback button{display:inline-block;margin:8px 6px 0 0;padding:6px 12px;border:1px solid currentColor;border-radius:20px;background:transparent;color:inherit;cursor:pointer}.cms-name-feedback span{display:block} input.cms-name-unavailable{border:2px solid #e5484d!important;box-shadow:0 0 0 3px rgba(229,72,77,.18)!important;background-color:#fff1f2!important;color:#881337!important} .ol-privacy-notice{position:fixed;bottom:20px;left:20px;z-index:9990;width:min(470px,calc(100% - 40px));padding:23px;border:1px solid #94cbb077;border-radius:22px;background:#16271f;color:#edf6ec;box-shadow:0 14px 60px #0004;font:14px/1.6 system-ui}.ol-privacy-notice p{font-size:13px;color:#c4d5c9}.ol-privacy-notice a{color:#d5f29b;margin-right:20px}.ol-privacy-notice button,.ol-privacy-open{border:1px solid #91bfa6;border-radius:22px;padding:10px 17px;background:#d5f29b;color:#14241a;cursor:pointer}.ol-privacy-open{position:fixed;bottom:12px;left:12px;z-index:9990}.ol-privacy-notice[hidden],.ol-privacy-open[hidden]{display:none} .ol-template-card{overflow:hidden;padding:16px!important;display:flex;flex-direction:column;gap:10px}.ol-template-thumb{height:290px;overflow:hidden;border-radius:15px;background:#eee;pointer-events:none;position:relative}.ol-template-thumb iframe{width:400px;height:700px;transform:scale(.65);transform-origin:top left;border:0;pointer-events:none}.ol-template-facts{font-size:11px;max-height:230px;overflow:auto}.ol-template-facts dt{font-weight:600;margin-top:8px}.ol-template-facts dd{margin:2px 0;overflow-wrap:anywhere}.ol-template-preview{font-size:12px;text-decoration:underline}.ol-template-card>button{padding:11px;border:0;border-radius:12px;background:#d5f29b;color:#14241a;cursor:pointer}.ol-template-card details{font-size:12px}.ol-template-card summary{cursor:pointer} .ol-template-card{justify-content:flex-start!important;align-items:stretch!important}.ol-template-card>button{margin-top:auto}.ol-template-thumb iframe{width:160%;transform:scale(.625);height:700px}.ol-template-facts dd{padding:3px 5px;background:#e8eee6;border-radius:5px} .cms-form-subscribe{box-sizing:border-box;width:100%;max-width:560px;margin:24px auto;padding:24px}.cms-form-subscribe h3,.cms-form-subscribe .cms-form-intro,.cms-form-subscribe .cms-form-feld,.cms-form-subscribe .cms-form-check,.cms-form-subscribe .cms-form-fuss{color:inherit}.cms-form-subscribe form{width:100%;min-width:0}.cms-form-subscribe input[type=email]{width:100%;box-sizing:border-box} .cms-form-subscribe .cms-form-feld>span,.cms-form-subscribe .cms-form-check>span,.cms-form-subscribe .cms-form-fuss a{color:inherit} /* Newsletter: generous controls and a clearly visible consent choice. */ .cms-form-subscribe{border:1px solid rgba(110,139,120,.24);border-radius:20px;padding:clamp(20px,4vw,32px);box-shadow:0 12px 36px rgba(27,56,39,.07)} .cms-form-subscribe h3{font-size:clamp(22px,3vw,28px);line-height:1.25;margin:0 0 12px;letter-spacing:-.025em} .cms-form-subscribe .cms-form-intro{line-height:1.65;margin:0 0 24px} .cms-form-subscribe form{display:flex;flex-direction:column;gap:18px} .cms-form-subscribe .cms-form-feld{display:grid;gap:9px;margin:0} .cms-form-subscribe .cms-form-feld>span{font-weight:600;font-size:14px} .cms-form-subscribe input[type=email]{min-height:52px;padding:14px 16px;border:1px solid #bac9bf;border-radius:12px;background:#fff;color:#243d2c;font-size:16px;line-height:1.4;transition:border-color .18s,box-shadow .18s} .cms-form-subscribe input[type=email]:focus{outline:2px solid #568b6b;outline-offset:2px;box-shadow:0 0 0 4px #568b6b19} .cms-form-subscribe .cms-form-check{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid rgba(110,139,120,.3);border-radius:12px;cursor:pointer;line-height:1.55;margin:0;text-align:left;min-height:48px} .cms-form-subscribe .cms-form-check input[type=checkbox]{appearance:none;flex:0 0 24px;width:24px;height:24px;margin:1px 0 0;border:2px solid #789583;border-radius:7px;background:#fff;display:grid;place-content:center;cursor:pointer} .cms-form-subscribe .cms-form-check input[type=checkbox]:checked{background:#d5f29b;border-color:#477550} .cms-form-subscribe .cms-form-check input[type=checkbox]:checked::after{content:'';width:10px;height:6px;border-left:2px solid #173b2b;border-bottom:2px solid #173b2b;transform:rotate(-45deg) translateY(-1px)} .cms-form-subscribe .cms-form-check:has(input:checked){border-color:#6d9977;box-shadow:0 0 0 1px #6d997722} .cms-form-subscribe .cms-form-check input:focus-visible{outline:3px solid #568b6b;outline-offset:3px} .cms-form-subscribe button[type=submit]{min-height:52px;width:100%;padding:14px 20px;border-radius:12px;font-weight:650;font-size:16px;line-height:1.4} .cms-form-subscribe .cms-form-fuss{font-size:13px;line-height:1.6;margin:0}.cms-form-subscribe> .cms-form-fuss{margin-top:18px} @media(forced-colors:active){.cms-form-subscribe .cms-form-check input[type=checkbox]{appearance:auto}} @media(prefers-reduced-motion:reduce){.cms-form-subscribe input[type=email]{transition:none}}