/* ========================================================================= Nuvario Sports · /sports (Glasklar in Gruen, ) Nur Regeln dieser Seite. Grundlage: css/glasklar.css (Theme + Bausteine). ========================================================================= */ /* ---------- Kopf: Text links, Produktvorschau rechts ---------- */ .sp-hero .container { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; } .sp-hero { overflow-x: clip; } .sp-hero h1 { font-size: clamp(40px, 3.9vw, 58px); hyphens: manual; } .sp-promises { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; } .sp-promises li { font-size: 15px; color: var(--ink2); } .sp-visual { position: relative; margin: 0; } .sp-glow { position: absolute; inset: 8% -6% -10% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--brand-light-rgb), .28), rgba(var(--brand-soft-rgb), .12) 55%, transparent 75%); filter: blur(8px); pointer-events: none; } .sp-frame { box-shadow: var(--shadow-lift), 0 40px 90px rgba(var(--brand-deep-rgb), .16); } .sp-frame .inner { container-type: inline-size; background: #fff; } /* ---------- Produktvorschau (Nachbildung von /admin/tag) ---------- Regeln unveraendert aus dem Original uebernommen (Klassen bleiben), die App-Variablen sind hier lokal gesetzt. Bildschirm-Media-Queries des Originals sind durch Container-Queries ersetzt, weil die Vorschau jetzt in einer Spalte sitzt. */ .sp-frame .ProduktVorschau-module__lZ0uYG__fenster { --color-accent: #176347; --color-accent-hover: #0f5139; --color-accent-subtle: #e8f4ee; --color-border: #e7ece8; --color-danger: #834a4a; --color-surface: #ffffff; --color-surface-sunken: #f6f8f6; --color-text-muted: #5f6a64; --color-text-secondary: #5b6660; --font-size-2xs: .6875rem; --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-xl: 1.3125rem; --font-weight-bold: 700; --font-weight-semibold: 600; --letter-spacing-tight: -0.02em; --radius-2xl: 1.375rem; --radius-full: 9999px; --radius-lg: .875rem; --radius-md: .75rem; --radius-sm: .5rem; --shadow-lg: none; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; color: #17201d; line-height: 1.35; } .ProduktVorschau-module__lZ0uYG__fenster{border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#ffffffc7;grid-template-columns:8rem minmax(0,1fr);min-inline-size:0;margin:0;display:grid;overflow:hidden} .ProduktVorschau-module__lZ0uYG__inhalt{min-inline-size:0;padding:var(--space-4)} .ProduktVorschau-module__lZ0uYG__seite{gap:var(--space-3);padding:var(--space-4) var(--space-3);color:#eef3ef;background-color:#0a2f22;background-image:linear-gradient(#17623f 0%,#114832 42%,#0a2f22 74%,#061f18 100%);flex-direction:column;display:flex} .ProduktVorschau-module__lZ0uYG__logo{display:block} .ProduktVorschau-module__lZ0uYG__logo img{block-size:auto;inline-size:5.5rem} .ProduktVorschau-module__lZ0uYG__navGruppe{flex-direction:column;gap:2px;display:flex} .ProduktVorschau-module__lZ0uYG__navLabel{font-size:var(--font-size-2xs);letter-spacing:.06em;text-transform:uppercase;color:#ffffff80;margin-block-end:2px} .ProduktVorschau-module__lZ0uYG__navEintrag{font-size:var(--font-size-2xs);color:#ffffffd1;border-radius:var(--radius-sm);white-space:nowrap;text-overflow:ellipsis;padding:4px 6px;overflow:hidden} .ProduktVorschau-module__lZ0uYG__navAktiv{color:#fff;font-weight:var(--font-weight-semibold);background-color:#ffffff1f} .ProduktVorschau-module__lZ0uYG__seiteFuss{align-items:center;gap:var(--space-2);margin-block-start:auto;padding-block-start:var(--space-3);display:flex} .ProduktVorschau-module__lZ0uYG__fussZeichen{border-radius:var(--radius-full);color:#0a2f22;block-size:1.5rem;inline-size:1.5rem;font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);background-color:#d1b47a;flex:none;justify-content:center;align-items:center;display:inline-flex} .ProduktVorschau-module__lZ0uYG__fussText{flex-direction:column;min-inline-size:0;display:flex} .ProduktVorschau-module__lZ0uYG__fussText strong{font-size:var(--font-size-2xs);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .ProduktVorschau-module__lZ0uYG__fussText small{font-size:var(--font-size-2xs);color:#ffffff8c} .ProduktVorschau-module__lZ0uYG__kopf{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-1) var(--space-1) var(--space-3);flex-wrap:wrap;display:flex} .ProduktVorschau-module__lZ0uYG__kopfTitel{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)} .ProduktVorschau-module__lZ0uYG__regler{gap:var(--space-2);display:flex} .ProduktVorschau-module__lZ0uYG__knopf{block-size:2rem;padding-inline:var(--space-3);border:1px solid var(--color-border);background-color:var(--color-surface);border-radius:var(--radius-sm);font-size:var(--font-size-2xs);color:var(--color-text-secondary);white-space:nowrap;align-items:center;display:inline-flex} .ProduktVorschau-module__lZ0uYG__kennzahlen{gap:var(--space-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid} .ProduktVorschau-module__lZ0uYG__kennzahl{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-block-size:5.5rem;padding:var(--space-3);flex-direction:column;display:flex;overflow:hidden} .ProduktVorschau-module__lZ0uYG__kennzahlTitel{font-size:var(--font-size-2xs);color:var(--color-text-secondary)} .ProduktVorschau-module__lZ0uYG__kennzahlWert{font-size:var(--font-size-xl);letter-spacing:var(--letter-spacing-tight);font-variant-numeric:tabular-nums;margin-block-start:var(--space-2);display:block} .ProduktVorschau-module__lZ0uYG__einheit{font-size:var(--font-size-sm);margin-inline-start:.125rem} .ProduktVorschau-module__lZ0uYG__delta{font-size:var(--font-size-2xs);color:var(--color-accent)} .ProduktVorschau-module__lZ0uYG__deltaOffen{font-size:var(--font-size-2xs);color:var(--color-danger)} .ProduktVorschau-module__lZ0uYG__kurve{block-size:1.25rem;inline-size:100%;color:var(--color-text-muted);margin-block-start:auto;padding-block-start:4px;display:block} .ProduktVorschau-module__lZ0uYG__plan{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-block-start:var(--space-3)} .ProduktVorschau-module__lZ0uYG__courtKopf{justify-content:space-between;align-items:center;gap:var(--space-2);margin-block-end:var(--space-3);display:flex} .ProduktVorschau-module__lZ0uYG__courtIdent{align-items:baseline;gap:var(--space-2);min-inline-size:0;display:flex} .ProduktVorschau-module__lZ0uYG__courtName{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)} .ProduktVorschau-module__lZ0uYG__courtMeta{font-size:var(--font-size-2xs);color:var(--color-text-muted);white-space:nowrap} .ProduktVorschau-module__lZ0uYG__freiBadge{font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);color:var(--color-accent);background-color:var(--color-accent-subtle);border-radius:var(--radius-full);white-space:nowrap;flex:none;padding:3px 9px} .ProduktVorschau-module__lZ0uYG__slots{grid-template-columns:repeat(auto-fill,minmax(4.25rem,1fr));gap:6px;display:grid} .ProduktVorschau-module__lZ0uYG__slot{border-radius:var(--radius-md);border:1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));background-image:linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 9%, white), color-mix(in srgb, var(--color-accent) 15%, white));flex-direction:column;gap:2px;min-block-size:3rem;padding:6px 7px;display:flex} .ProduktVorschau-module__lZ0uYG__slotZeit{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-accent-hover);font-variant-numeric:tabular-nums;line-height:1.1} .ProduktVorschau-module__lZ0uYG__slotPreis{font-size:var(--font-size-2xs);color:var(--color-accent)} .ProduktVorschau-module__lZ0uYG__slotBelegt{border-color:var(--color-border);background-image:none;background-color:var(--color-surface-sunken)} .ProduktVorschau-module__lZ0uYG__slotBelegt .ProduktVorschau-module__lZ0uYG__slotZeit{color:var(--color-text-secondary)} .ProduktVorschau-module__lZ0uYG__slotBelegt .ProduktVorschau-module__lZ0uYG__slotPreis{color:var(--color-text-muted)} .ProduktVorschau-module__lZ0uYG__legende{gap:var(--space-4);font-size:var(--font-size-2xs);color:var(--color-text-secondary);flex-wrap:wrap;margin-block-start:var(--space-3);display:flex} .ProduktVorschau-module__lZ0uYG__legende span{align-items:center;gap:var(--space-2);display:inline-flex} .ProduktVorschau-module__lZ0uYG__swatch{border-radius:var(--radius-sm);border:1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));background-color:color-mix(in srgb, var(--color-accent) 13%, white);flex-shrink:0;block-size:.85rem;inline-size:.85rem} .ProduktVorschau-module__lZ0uYG__swatchBelegt{border-color:var(--color-border);background-color:var(--color-surface-sunken)} /* Einbettung in den Glas-Rahmen */ .sp-frame .ProduktVorschau-module__lZ0uYG__fenster { border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #fff; } .sp-frame .ProduktVorschau-module__lZ0uYG__slot { transition: transform .25s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sp-frame .ProduktVorschau-module__lZ0uYG__slot:not(.ProduktVorschau-module__lZ0uYG__slotBelegt):hover { transform: translateY(-2px); } } @container (max-width: 640px) { .ProduktVorschau-module__lZ0uYG__kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 470px) { .ProduktVorschau-module__lZ0uYG__fenster { grid-template-columns: 1fr; } .ProduktVorschau-module__lZ0uYG__seite { display: none; } } /* ---------- Junges Team ---------- */ .sp-team-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px; border-radius: 40px; } .sp-team-panel h2 { margin-bottom: 0; font-size: clamp(32px, 3.8vw, 50px); } .sp-badge { text-transform: none; letter-spacing: .02em; font-size: 13px; color: var(--brand); } .sp-badge-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--brand-rgb), .12); } .sp-badge-icon svg { width: 13px; height: 13px; } .sp-team-panel .lead { margin-bottom: 26px; } .sp-team-points { display: flex; flex-wrap: wrap; gap: 10px 24px; } /* ---------- Abschnitte ---------- */ .sp-sec .cards .card h3 { font-size: 20px; } .sp-list { margin-top: 4px; } .sp-list li { font-size: 15.5px; color: var(--ink2); } /* ---------- Drei Vergabe-Arten ---------- */ .sp-modelle .card { position: relative; overflow: hidden; } .sp-modelle .card-kicker { font-size: 13px; } .sp-anzeige strong { white-space: nowrap; } .sp-anzeige { margin-top: auto !important; padding-top: 20px; font-family: var(--mono); font-size: 13px !important; letter-spacing: .02em; color: var(--ink2); } .sp-anzeige strong { display: inline-block; margin: 0 2px; padding: 3px 10px; border-radius: 999px; background: rgba(var(--brand-rgb), .1); color: var(--brand); font-weight: 600; } .sp-modelle .card p:not(.sp-anzeige) { margin-bottom: 4px; } .sp-gast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .sp-gast figure { margin: 0; min-width: 0; } .sp-gast .media-frame .inner img { aspect-ratio: 1440 / 860; object-fit: cover; object-position: top; } /* ---------- Sportarten ---------- */ .sp-sports { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 12px; } .sp-sport { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 14px 12px 20px; border-radius: 20px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(var(--brand-deep-rgb), .06); transition: transform .35s var(--ease-out), box-shadow .25s var(--ease), background-color .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .sp-sport:hover { transform: translateY(-3px); background: rgba(255,255,255,.85); box-shadow: var(--shadow-lift); } } .sp-sport-name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .sp-type { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; } .sp-sport--court .sp-type { background: rgba(var(--brand-rgb), .1); color: var(--brand); } .sp-sport--flaeche .sp-type { background: var(--brand); color: #fff; } .sp-sport--start .sp-type { background: rgba(var(--ink-rgb), .06); color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .35); } .sp-sport-links { max-width: 760px; margin: 32px auto 0; text-wrap: pretty; } /* ---------- Werte ---------- */ .sp-werte-sec { padding-top: 0; } .sp-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 12px; border-radius: 32px; } .sp-wert { display: flex; align-items: center; gap: 16px; padding: 20px 22px; position: relative; } .sp-wert + .sp-wert::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--ink-rgb), .1), transparent); } .sp-wert .icon { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; } .sp-wert .icon svg { width: 22px; height: 22px; } .sp-wert-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sp-wert-txt strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .sp-wert-txt span { font-size: 14.5px; color: var(--ink2); line-height: 1.4; } /* ---------- Preise ---------- */ .sp-banner { max-width: 900px; margin: 0 auto 40px; } .sp-banner p { font-size: 16px; } .sp-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sp-tiers .tier-price { margin: 10px 0 12px; } .sp-tiers .tier-price strong { font-weight: 600; } .sp-tiers .tier-desc { min-height: 3em; } .sp-tiers .checklist li { font-size: 15px; } .sp-fuss { max-width: 900px; margin: 32px auto 0; text-align: center; font-size: 14.5px; color: var(--ink2); line-height: 1.6; text-wrap: pretty; } .sp-fuss strong { color: var(--ink); font-weight: 600; } /* ---------- Fragen ---------- */ .sp-faq-foot { max-width: 820px; margin-inline: auto; text-wrap: pretty; line-height: 1.7; } /* ---------- Fuss ---------- */ .sp-foot-links li { display: inline-flex; align-items: center; } .sp-sep { color: var(--ink3); opacity: .6; font-size: 14px; } /* ---------- Responsiv ---------- */ @media (max-width: 1180px) { .sp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-tiers .tier-desc { min-height: 0; } } @media (max-width: 1080px) { .sp-team-panel { grid-template-columns: 1fr; gap: 28px; padding: 44px; } .sp-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-wert:nth-child(3)::before { display: none; } } @media (max-width: 899px) { .sp-hero .container { grid-template-columns: 1fr; gap: 44px; } .sp-gast { grid-template-columns: 1fr; } .sp-modelle { grid-template-columns: 1fr; } } @media (max-width: 600px) { .sp-promises { flex-direction: column; gap: 10px; margin-top: 26px; } .sp-team-panel { padding: 28px 22px; border-radius: 30px; } .sp-team-points { flex-direction: column; gap: 10px; } .sp-sports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sp-sport { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 14px 14px; min-height: 0; border-radius: 18px; } .sp-sport-name { font-size: 15.5px; } .sp-type { font-size: 10.5px; min-height: 22px; padding: 0 8px; } .sp-werte { grid-template-columns: 1fr; padding: 6px; border-radius: 26px; } .sp-wert { padding: 16px; } .sp-wert::before { display: none; } .sp-tiers { grid-template-columns: 1fr; } .sp-banner { margin-bottom: 28px; } .sp-fuss { text-align: left; } .sp-sport-links, .sp-faq-foot { text-align: left; } .sp-foot-links { gap: 0 !important; } } @media (max-width: 370px) { .sp-sports { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .sp-sport, .sp-frame .ProduktVorschau-module__lZ0uYG__slot { transition: none; } }