/* ═══════════════════════════════════════════════════════════ Jet-Design – 3D-Druck-Shop Warme Neutraltoene statt der Vereinsfarben: Der Blick soll auf den Produktfotos liegen, nicht auf der Seite drumherum. Gedruckte Objekte sind meist selbst sandfarben, schwarz oder weiss - eine kraeftige Hausfarbe wuerde mit ihnen streiten. Getragen wird die Seite deshalb von einem einzigen dunklen Ton fuer Text und Knoepfe (--ink), abgestuften Sandtoenen fuer Flaechen und einem gedaempften Taupe als einzigem Akzent. Die alten Namen (--blue, --clay …) bleiben als Rollen erhalten und sind hier neu belegt - so musste nicht jede der ueber 100 Fundstellen im Stylesheet angefasst werden, und es gibt weiterhin nur EINE Stelle, an der Farben festgelegt werden. ═══════════════════════════════════════════════════════════ */ :root{ /* Traeger: fast schwarz, minimal warm gebrochen. Reines #000 wirkt auf einer hellen, warmen Flaeche hart und blaustichig. */ --ink:#141210; --ink-2:#6B625B; /* Fliesstext zweiter Ordnung, Beschriftungen */ --muted:#8A807A; /* Hilfstexte, Zahlen unter Diagrammen */ /* Primaerfarbe fuer Knoepfe, Verweise und Hervorhebungen. Heisst aus der Vorgeschichte --blue, ist aber der dunkle Ton. */ --blue:#141210; --blue-d:#000000; /* gedrueckt / :hover */ --blue-dd:#1F1B18; /* dunkle Flaechen, Fussbereich */ /* Einziger Akzent: gedaempftes Taupe. Nur fuer kleine Flaechen - Trennstrich, aktive Zustaende, Hoverkanten. */ --clay:#B9A28A; --clay-l:#CDBAA6; /* Schrift auf dem Akzentband. Wird von der Farbeinstellung neu gesetzt, je nachdem ob der gewaehlte Akzent hell oder dunkel ist - bei einem tiefen Gruen muss hier Weiss stehen, sonst verschwindet die Zeile. */ --auf-akzent:#141210; /* Schleier ueber den Bildern im Seitenkopf. Links deckt er stark, weil dort die weisse Schrift steht; nach rechts laeuft er schnell aus und gibt das Foto frei. Wird von Redaktion -> Farben ueberschrieben. */ --schleier: linear-gradient(100deg, rgba(20,18,16,.82) 0%, rgba(20,18,16,.451) 42%, rgba(20,18,16,.123) 84%, rgba(20,18,16,.041) 100%), linear-gradient(to top, rgba(20,18,16,.549), transparent 46%); --grey:#D9D2CB; --line:#E7E1DA; /* Trennlinien und Rahmen */ --bg:#FFFFFF; --bg-2:#F5F1EE; /* abgesetzte Abschnitte */ --sand:#EFE9E3; /* Bildplatzhalter, ruhige Flaechen */ --sand-2:#E4DBD2; --wrap:1240px; /* Kanten sind knapp, nicht rund: Das Vorbild setzt Bilder randscharf und nimmt nur den Knoepfen die Ecke. Runde Kacheln lassen ein Sortiment schnell nach Spielzeug aussehen. */ --r:4px; /* Karten, Bilder */ --r-btn:8px; /* Knoepfe */ --ease:cubic-bezier(.22,.9,.28,1); /* Schatten fast unsichtbar. Das Vorbild arbeitet ohne, Tiefe entsteht ueber Flaechenkontrast. Ganz ohne wirken die Karten im Redaktions- bereich aber verloren, deshalb ein sehr flacher Rest. */ --shadow:0 1px 2px rgba(20,18,16,.04), 0 8px 24px rgba(20,18,16,.06); --shadow-h:0 2px 6px rgba(20,18,16,.06), 0 16px 40px rgba(20,18,16,.10); /* Systemschriften. Das Vorbild nutzt Work Sans und IBM Plex Sans von Google; die Inhaltsrichtlinie in .htaccess laesst aber nur Dateien vom eigenen Server zu (default-src 'self'), ein Einbinden von aussen wuerde also blockiert - und nebenbei jede Besucheradresse an Google melden. Wer die Schriften wirklich will, legt die woff2-Dateien unter assets/fonts/ ab und ergaenzt hier @font-face. */ --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} /* overflow-x am Wurzelelement: das geschlossene Mobilmenü liegt per position:fixed rechts ausserhalb des Viewports und würde sonst Querscrollen erzeugen. Am gesetzt bleibt position:sticky intakt. */ html{scroll-behavior:smooth; overflow-x:hidden} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} ul{margin:0; padding:0; list-style:none} h1,h2,h3,h4{margin:0; line-height:1.08; letter-spacing:-.032em; font-weight:600} p{margin:0 0 1em} .wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px} /* ── Bausteine ───────────────────────────────────────────── */ .kicker,.hero__kicker{ display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-2); } .dash{width:28px; height:1px; background:var(--clay); flex:none} .h2{font-size:clamp(32px,4.2vw,50px)} .h2--light{color:#fff} .h3{font-size:clamp(23px,2.3vw,30px); margin-bottom:14px} .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:var(--r-btn); border:1px solid var(--blue); background:var(--blue); color:#fff; font-weight:600; font-size:15px; letter-spacing:.02em; cursor:pointer; transition:background .25s, box-shadow .25s, border-color .25s, color .25s; } /* Kein Anheben beim Ueberfahren: Das Vorbild laesst Flaechen ruhig stehen und wechselt nur den Ton. */ .btn:hover{background:var(--blue-d); border-color:var(--blue-d)} .btn--ghost{background:transparent; border-color:rgba(255,255,255,.75); color:#fff} .btn--ghost:hover{background:#fff; border-color:#fff; color:var(--blue); box-shadow:none} .btn--light{background:#fff; border-color:#fff; color:var(--ink)} .btn--light:hover{background:var(--bg-2); border-color:var(--bg-2); color:var(--blue-d)} .btn--sm{padding:11px 22px; font-size:14px} .more{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:15px; color:var(--blue); } .more::after{content:"→"; transition:transform .25s var(--ease)} .more:hover::after{transform:translateX(6px)} .more--lg{font-size:16px} /* ── Topbar ──────────────────────────────────────────────── */ /* Die Schrift auf dem Akzentband kommt aus --auf-akzent und wird von der Farbeinstellung nach Kontrast gewaehlt. Fest weiss war sie frueher und kam auf dem Taupe auf 2,4:1 - unter der Mindestanforderung von 4,5:1. Mit frei waehlbarem Akzent ist eine feste Schriftfarbe erst recht keine Loesung: ein tiefes Gruen braucht Weiss, ein helles Beige Schwarz. */ .topbar{background:var(--clay); color:var(--auf-akzent); font-size:13px; letter-spacing:.02em} .topbar__in{display:flex; justify-content:space-between; align-items:center; gap:20px; height:40px} .topbar__tag{font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .topbar__links{display:flex; gap:22px; white-space:nowrap} .topbar__links a{transition:color .2s} .topbar__links a:hover{color:var(--auf-akzent)} .topbar__login{color:var(--auf-akzent); font-weight:600} /* ── Header ──────────────────────────────────────────────── */ .hdr{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s; } .hdr.is-stuck{box-shadow:0 6px 26px rgba(18,23,28,.09)} .hdr__in{display:flex; align-items:center; justify-content:space-between; gap:26px; height:82px; transition:height .3s var(--ease)} .hdr.is-stuck .hdr__in{height:68px} /* Die Wortmarke ist hochformatig (Verhaeltnis rund 3:4) und traegt den Namen selbst. Ihre Hoehe bestimmt die Hoehe des ganzen Seitenkopfs: bei 60 px schob sie ihn deutlich weiter auf und nahm dem Inhalt darunter den Platz. 46 px sind der Kompromiss - "Design" bleibt lesbar, der Kopf schlank. */ .brand{display:flex; align-items:center; gap:14px} .brand__logo{height:46px; width:auto; transition:height .3s var(--ease)} .hdr.is-stuck .brand__logo{height:38px} .brand__txt{display:flex; flex-direction:column; line-height:1.15} .brand__txt strong{font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink)} .brand__txt small{font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:.06em; text-transform:uppercase} .nav{display:flex; align-items:center; gap:26px} .nav__list{display:flex; align-items:center; gap:2px} .nav__list > li{position:relative} .nav__list > li > a{ display:block; padding:11px 15px; border-radius:9px; font-size:15.5px; font-weight:700; color:var(--ink); transition:color .2s, background .2s; } .nav__list > li > a:hover, .nav__list > li > a.is-active{color:var(--blue); background:rgba(20,18,16,.07)} .has-sub > a::after{content:"⌄"; margin-left:6px; font-size:12px; opacity:.5; position:relative; top:-2px} .sub{ position:absolute; top:calc(100% + 8px); left:0; min-width:238px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transform:translateY(10px); transition:all .24s var(--ease); } .has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1; visibility:visible; transform:translateY(0)} .sub a{display:block; padding:10px 14px; border-radius:8px; font-size:15px; font-weight:600; color:var(--ink-2); transition:.18s} .sub a:hover{background:var(--bg-2); color:var(--blue); padding-left:19px} .sub::before{content:""; position:absolute; top:-9px; left:0; right:0; height:9px} .burger{display:none; width:46px; height:46px; border:0; background:transparent; cursor:pointer; padding:11px; gap:5px; flex-direction:column; justify-content:center} .burger span{display:block; height:2.5px; background:var(--ink); border-radius:2px; transition:.3s var(--ease)} .burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* ── Hero ────────────────────────────────────────────────── */ .hero{position:relative; min-height:min(92vh,860px); display:flex; align-items:center; overflow:hidden; background:var(--ink)} .hero__stage{position:absolute; inset:0} .hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.1); transition:opacity 1.5s var(--ease), transform 8s linear; } .hero__slide.is-on{opacity:1; transform:scale(1)} /* Warmer, deutlich zurueckhaltenderer Schleier. Er muss nur so weit abdunkeln, dass weisse Schrift sicher lesbar bleibt - das Foto soll erkennbar bleiben, nicht eingefaerbt werden. */ .hero__veil{position:absolute; inset:0; background:var(--schleier)} /* Weicher Schatten hinter der gesamten Kopfschrift. Welche Bilder spaeter im Slider liegen, ist beim Gestalten nicht bekannt - ueber einem hellen Foto reicht der Schleier allein nicht, damit weisse Schrift sicher lesbar bleibt. Der Schatten kostet nichts und faellt auf dunklen Bildern nicht auf. */ .hero__body{position:relative; z-index:2; color:#fff; padding-block:120px 150px; text-shadow:0 1px 24px rgba(20,18,16,.45)} .hero__kicker{color:#fff; opacity:.9} .hero__ttl{ font-size:clamp(40px,6.6vw,86px); font-weight:900; letter-spacing:-.038em; text-shadow:0 3px 30px rgba(0,20,40,.4); margin-bottom:24px; } .hero__ttl .ln{display:block; overflow:hidden} .hero__ttl .ln > *,.hero__ttl .ln{animation:rise 1s var(--ease) both} .hero__ttl .ln:nth-child(2){animation-delay:.12s} /* Die Hervorhebung ist der Akzentton selbst, nicht ein Band dahinter. Weisse Schrift auf dem hellen Taupe kam auf rund 2:1 Kontrast und war damit kaum lesbar; der Taupe auf dem abgedunkelten Foto liegt deutlich darueber und traegt den Akzent trotzdem. */ .hero__ttl em{font-style:normal; color:var(--clay-l)} @keyframes rise{from{opacity:0; transform:translateY(46px)} to{opacity:1; transform:none}} .hero__sub{max-width:620px; font-size:clamp(17px,1.7vw,20px); color:rgba(255,255,255,.9); margin-bottom:34px; animation:rise 1s var(--ease) .24s both} .hero__acts{display:flex; gap:14px; flex-wrap:wrap; animation:rise 1s var(--ease) .34s both} .hero__dots{position:absolute; left:0; right:0; bottom:42px; z-index:3; display:flex; gap:9px; justify-content:center} .hero__dots button{width:34px; height:4px; border:0; border-radius:3px; cursor:pointer; background:rgba(255,255,255,.34); transition:.3s} .hero__dots button.is-on{background:var(--clay-l); width:52px} .hero__cue{position:absolute; bottom:38px; right:36px; z-index:3; width:24px; height:40px; border:2px solid rgba(255,255,255,.45); border-radius:14px} .hero__cue span{display:block; width:3px; height:8px; background:#fff; border-radius:2px; margin:7px auto; animation:cue 1.8s infinite} @keyframes cue{0%{opacity:0; transform:translateY(0)} 40%{opacity:1} 80%{opacity:0; transform:translateY(13px)} 100%{opacity:0}} /* ── Fakten ──────────────────────────────────────────────── */ .facts{background:var(--blue); color:#fff} .facts__grid{display:grid; grid-template-columns:repeat(4,1fr); padding-block:38px} .fact{text-align:center; padding-inline:14px} .fact + .fact{border-left:1px solid rgba(255,255,255,.18)} .fact b{display:block; font-size:clamp(34px,4vw,50px); font-weight:900; letter-spacing:-.04em; line-height:1} .fact span{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; opacity:.78} /* ── Sections ────────────────────────────────────────────── */ .sec{padding-block:96px} .sec--alt{background:var(--bg-2)} .sec__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px} /* ── News-Karussell ──────────────────────────────────────── */ .carousel{overflow:hidden; padding-block:6px} .carousel__track{display:flex; gap:30px; transition:transform .62s var(--ease)} /* Rahmenlos: Das Vorbild stellt Bilder frei nebeneinander und laesst den Weissraum die Trennung uebernehmen. Ein Kasten um jede Kachel wuerde bei 30 Artikeln ein Gitternetz erzeugen, das vom Produkt ablenkt. */ .card{ flex:0 0 calc((100% - 60px) / 3); background:transparent; border:0; display:flex; flex-direction:column; } .card__img{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--sand); border-radius:var(--r)} .card__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)} .card:hover .card__img img{transform:scale(1.04)} .card__body{padding:18px 2px 4px; display:flex; flex-direction:column; flex:1} /* --ink-2 statt --muted: In dieser Zeile steht auf Beitragskacheln das Datum, und das ist die einzige oeffentlich sichtbare Stelle, an der der blasse Hilfston stand - mit 3,85:1 unter den geforderten 4,5:1. Mit --ink-2 sind es 5,96:1, sichtbar ist nur eine Spur mehr Tiefe. Die Kategorie-Pille daneben bringt ihre eigene Farbe mit und bleibt davon unberuehrt. */ .card__meta{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:12.5px; font-weight:500; color:var(--ink-2)} .tag{padding:3px 10px; border-radius:100px; background:var(--sand); color:var(--ink-2); font-size:11px; text-transform:uppercase; letter-spacing:.1em} .card__ttl{font-size:19px; margin-bottom:6px; line-height:1.3; font-weight:600} .card__ttl a{transition:color .2s} .card:hover .card__ttl a{color:var(--ink)} .card__txt{font-size:14.5px; color:var(--ink-2); flex:1; margin-bottom:10px} .carousel__nav{display:flex; gap:10px} .cbtn{width:50px; height:50px; border-radius:50%; border:2px solid var(--line); background:#fff; color:var(--blue); font-size:19px; cursor:pointer; transition:.24s var(--ease)} .cbtn:hover:not(:disabled){background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px)} .cbtn:disabled{opacity:.34; cursor:not-allowed} .carousel__foot{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:38px} .dots{display:flex; gap:8px} .dots button{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--grey); cursor:pointer; transition:.3s} .dots button.is-on{background:var(--blue); width:28px; border-radius:5px} /* ── Split-Blöcke ────────────────────────────────────────── */ .split{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; padding-block:56px} .split + .split{border-top:1px solid var(--line)} .split--flip .split__img{order:2} .split__img{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)} .split__img img{aspect-ratio:16/10; object-fit:cover; width:100%; transition:transform .8s var(--ease)} .split:hover .split__img img{transform:scale(1.04)} .num{display:block; font-size:14px; font-weight:900; letter-spacing:.18em; color:var(--clay); margin-bottom:12px} .split__txt p{color:var(--ink-2)} .ticks{margin:20px 0 24px; display:grid; gap:10px} .ticks li{position:relative; padding-left:30px; font-size:15.5px; font-weight:600} .ticks li::before{ content:""; position:absolute; left:0; top:7px; width:17px; height:17px; border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; } /* ── CTA ─────────────────────────────────────────────────── */ .cta{background:var(--blue-dd); color:#fff; position:relative; overflow:hidden} .cta::after{content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%; border:1px solid rgba(255,255,255,.10)} .cta__in{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; padding-block:66px; flex-wrap:wrap} .cta p{margin:12px 0 0; color:rgba(255,255,255,.85); max-width:560px} /* ── Footer ──────────────────────────────────────────────── */ .ft{background:var(--ink); color:rgba(255,255,255,.62); font-size:15px} .ft__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:44px; padding-block:70px 52px} /* weisse Logo-Variante – braucht keine aufgehellte Platte mehr */ /* Im Fussbereich darf die Wortmarke groesser stehen als im Seitenkopf - dort draengt sie keinen Inhalt weg, und sie ersetzt den frueher darunter gesetzten Namen. */ .ft__logo{height:64px; width:auto; margin-bottom:18px} .ft__club{color:#fff; font-weight:800; font-size:17px; margin-bottom:6px} .ft__geo{font-size:13.5px; opacity:.62} .ft h4{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:#fff; margin-bottom:15px} .ft h4.mt{margin-top:30px} .ft__list{display:grid; gap:9px} .ft__list a{transition:color .2s} .ft__list a:hover{color:var(--clay-l)} .ft__bar{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:22px; border-top:1px solid rgba(255,255,255,.11); font-size:14px; flex-wrap:wrap} .ft__bar p{margin:0} .ft__bar nav{display:flex; gap:24px} .ft__bar a:hover{color:#fff} /* ── Reveal ──────────────────────────────────────────────── */ .reveal{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease)} .reveal.is-in{opacity:1; transform:none} /* ── Responsive ──────────────────────────────────────────── */ @media (max-width:1080px){ .card{flex:0 0 calc((100% - 30px) / 2)} .ft__grid{grid-template-columns:1fr 1fr; gap:38px} } @media (max-width:900px){ .topbar__tag{display:none} .topbar__in{justify-content:center} /* Der Schaltknopf muss ueber dem geoeffneten Panel liegen, sonst laesst sich das Menue nicht mehr schliessen. */ .burger{display:flex; position:relative; z-index:80} /* Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer alle position:fixed-Nachfahren. Das Menue steckt im Header - mit dem Filter war es deshalb auf dessen Hoehe eingesperrt (rund 130 statt 812 Pixel), man sah nur den ersten Eintrag und musste im Panel scrollen. Auf dem Handy ist die Weichzeichnung ohnehin kaum sichtbar; die halbtransparente Hintergrundfarbe bleibt erhalten. */ .hdr{backdrop-filter:none} .nav{ position:fixed; inset:0 0 0 auto; width:min(340px,86vw); z-index:70; /* ueber der Kopfzeile selbst */ flex-direction:column; align-items:stretch; gap:0; background:#fff; padding:88px 22px 28px; overflow-y:auto; overscroll-behavior:contain; box-shadow:-12px 0 48px rgba(18,23,28,.18); transform:translateX(102%); transition:transform .38s var(--ease); } .nav.is-open{transform:none} .nav__list{flex-direction:column; align-items:stretch; gap:2px} .nav__list > li > a{padding:12px 12px; font-size:17px} .has-sub > a::after{float:right} .sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--line); border-radius:0; margin:2px 0 8px 14px; padding:0 0 0 8px; min-width:0} .sub::before{display:none} .nav__cta{margin-top:16px} .split,.split--flip .split__img{grid-template-columns:1fr; order:0} .split{gap:32px; padding-block:40px} .facts__grid{grid-template-columns:repeat(2,1fr); gap:30px 0} .fact:nth-child(3){border-left:0} .sec{padding-block:70px} .hero__body{padding-block:96px 130px} } @media (max-width:620px){ body{font-size:16px} .wrap{padding-inline:20px} .card{flex:0 0 100%} .carousel__track{gap:18px} .ft__grid{grid-template-columns:1fr; gap:34px; padding-block:52px 40px} .sec__head{flex-direction:column; align-items:flex-start} .cta__in{padding-block:48px} .hero__cue{display:none} .brand__txt small{display:none} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important} html{scroll-behavior:auto} } /* ═══════════════════════════════════════════════════════════ Ab hier: Seiten jenseits der Startseite (News, Artikel, statische Seiten, Anmeldung) ═══════════════════════════════════════════════════════════ */ .wrap--schmal{max-width:820px} /* Mannschaftsseite: .wrap--schmal (820px) liess die fuenfspaltige Tabelle so eng werden, dass "Mannschaft" umbrach (z.B. "Damen 40 (4er) 2"). Breiter als schmal, aber bewusst nicht die volle Breite (--wrap, 1240px) - der einleitende Absatz soll nicht ueber die ganze Zeile laufen. */ .wrap--mannschaften{max-width:1040px} /* Wettbewerbs-Zwischenueberschrift (z.B. "Bezirk A 2026 / Sommer") einer zweiten oder weiteren Liga derselben Saison. Ohne eigenen Abstand sass sie direkt auf dem unteren Rahmen der vorherigen Tabelle - .h3 selbst setzt nur einen unteren, keinen oberen Abstand. */ .mannschaften-liga{font-size:19px; margin-top:34px} /* News-Übersicht: gleiches Kartenraster, aber ohne Karussell */ .newsgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px} @media (max-width:1080px){.newsgrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.newsgrid{grid-template-columns:1fr; gap:20px}} /* Einzelmeldung */ .artikel__meta{color:var(--ink-2); font-weight:700; font-size:14.5px; margin:14px 0 26px} .artikel__bild{width:100%; border-radius:var(--r); margin-bottom:30px; box-shadow:var(--shadow)} .artikel__text{font-size:17.5px} .artikel__text h2{font-size:27px; margin:34px 0 12px} .artikel__text h3{font-size:22px; margin:28px 0 10px} .artikel__text ul{list-style:disc; padding-left:22px; margin:0 0 1em} .artikel__text li{margin:5px 0} .artikel__text img{border-radius:var(--r); margin:20px 0} .artikel__text a{color:var(--blue); font-weight:600; text-decoration:underline} /* Formulare */ .form{display:grid; gap:18px; max-width:420px; margin-top:26px} .form label{display:grid; gap:7px; font-weight:700; font-size:14.5px} .form input{ padding:13px 15px; border:2px solid var(--line); border-radius:10px; font:inherit; font-weight:500; transition:border-color .2s; } .form input:focus{outline:none; border-color:var(--ink)} .form .btn{justify-self:start} .hinweis{padding:13px 17px; border-radius:10px; font-size:15.5px; font-weight:600} .hinweis--fehler{background:#FDECEC; border-left:4px solid #C0392B; color:#8E2A20} /* ═══════════════════════════════════════════════════════════ Redaktionsbereich ═══════════════════════════════════════════════════════════ */ .klein{font-size:12.5px; font-weight:500; color:var(--ink-2)} .tabelle-umbruch{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r)} .tabelle{width:100%; border-collapse:collapse; font-size:15px; min-width:760px} .tabelle th{ text-align:left; padding:14px 18px; background:var(--bg-2); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); border-bottom:1px solid var(--line); white-space:nowrap; } .tabelle td{padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:top} .tabelle tr:last-child td{border-bottom:0} .tabelle tbody tr:hover{background:var(--bg-2)} .tabelle .rechts{text-align:right; white-space:nowrap} .pill{ display:inline-block; padding:4px 12px; border-radius:100px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; } .pill--gruen{background:#E6F4EA; color:#1E7A38} .pill--grau{background:#EDF0F2; color:var(--ink-2)} .hinweis--ok{background:#EAF6EC; border-left:4px solid #2E7D42; color:#1E5B30} /* Sachlicher Hinweis ohne Warncharakter - etwa der Vermerk auf der Mediathek, dass nach der Anmeldung mehr zu sehen ist. */ /* Ankreuzfeld mit Beschriftung daneben, als Ganzes anklickbar. */ .schalter{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; font-size:16px; margin:4px 0 10px; } .schalter input{width:20px; height:20px; cursor:pointer; flex:none} .hinweis--info{background:var(--bg-2); border-left:3px solid var(--clay); color:var(--ink)} .hinweis--info a{text-decoration:underline} .mediathek-hinweis{margin:6px 0 26px} /* Formular der Redaktion */ .form--breit{max-width:none} .form textarea,.form select{ padding:13px 15px; border:2px solid var(--line); border-radius:10px; font:inherit; font-weight:500; background:#fff; transition:border-color .2s; } .form textarea{resize:vertical; line-height:1.6; font-family:var(--font)} .form textarea:focus,.form select:focus{outline:none; border-color:var(--ink)} .form input[type=file]{padding:11px; border:2px dashed var(--line); border-radius:10px; font-size:14.5px} .form__reihe{display:grid; grid-template-columns:repeat(3,1fr); gap:18px} @media (max-width:760px){.form__reihe{grid-template-columns:1fr}} .form__aktionen{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px} .btn--still{background:transparent; border-color:var(--line); color:var(--ink)} .btn--still:hover{background:var(--bg-2); border-color:var(--grey); color:var(--ink); box-shadow:none} .loeschen{ margin-left:auto; background:none; border:0; cursor:pointer; color:#C0392B; font:inherit; font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:3px; padding:8px; } .loeschen:hover{color:#8E2A20} .vorschau{display:flex; align-items:center; gap:16px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2)} .vorschau img{width:150px; aspect-ratio:3/2; object-fit:cover; border-radius:8px; flex:none} /* Formatierungshilfe im Redaktionsformular */ .hilfe{border:1px solid var(--line); border-radius:10px; padding:0 16px; background:var(--bg-2)} .hilfe summary{cursor:pointer; padding:13px 0; font-weight:700; font-size:14.5px; color:var(--ink)} .hilfe__tab{border-collapse:collapse; font-size:14.5px; margin-bottom:10px} .hilfe__tab td{padding:5px 22px 5px 0; vertical-align:top} .hilfe code{background:#fff; border:1px solid var(--line); border-radius:5px; padding:2px 7px; font-size:13px; white-space:nowrap} /* Unternavigation der Redaktion */ /* Grundabstand für Seiten, auf denen die Navigation direkt der Überschrift folgt … */ .adminnav{display:flex; gap:4px; flex-wrap:wrap; margin:22px 0 30px; border-bottom:1px solid var(--line); padding-bottom:0} /* … und enger, wenn davor schon ein Kopfbereich mit eigenem Abstand steht */ .sec__head + .adminnav{margin-top:-20px} .adminnav a{padding:11px 16px; font-weight:700; font-size:15px; color:var(--ink-2); border-bottom:3px solid transparent; margin-bottom:-1px; transition:.2s} .adminnav a:hover{color:var(--ink)} .adminnav a.is-on{color:var(--blue); border-bottom-color:var(--ink)} /* Die drei Bereiche als Knoepfe. Rechtecke mit dem Knopfradius der Seite, nicht die runden Pillen der Filterzeilen - sonst saehen sie auf den Seiten Kunden und Bestellungen genauso aus wie der Statusfilter direkt darunter, und zwei gleiche Reihen untereinander sagen nichts. */ .bereiche{display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 14px} .sec__head + .bereiche{margin-top:-20px} .bereiche__btn{ display:inline-flex; align-items:center; padding:11px 22px; border:1px solid var(--line); border-radius:var(--r-btn); background:transparent; color:var(--ink-2); font-weight:600; font-size:15px; letter-spacing:.02em; transition:background .2s, border-color .2s, color .2s; } .bereiche__btn:hover{border-color:var(--grey); color:var(--ink)} .bereiche__btn.is-on{background:var(--ink); border-color:var(--ink); color:#fff} /* Zweite Zeile: die Punkte des offenen Bereichs, als Reiter. */ .adminnav2{display:flex; gap:4px; flex-wrap:wrap; margin:0 0 30px; border-bottom:1px solid var(--line)} .adminnav2 a{padding:9px 14px; font-weight:600; font-size:14.5px; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; transition:.2s} .adminnav2 a:hover{color:var(--ink)} .adminnav2 a.is-on{color:var(--ink); border-bottom-color:var(--clay)} /* Im Kundenkonto steht die Leiste zwischen Kopfbereich und Inhalt, also ausserhalb der Sektion. Ohne das addieren sich ihr unterer Abstand und der obere Innenabstand der Sektion zu einer auffaelligen Luecke. */ .kontonav .adminnav{margin-bottom:0} .kontonav + .sec{padding-top:34px} .abstand{margin-top:46px; margin-bottom:16px} /* Kompakte Tabelle mit Eingabefeldern (Menü) */ .tabelle--eng td{padding:9px 12px} .tabelle--eng input[type=text],.tabelle--eng input[type=number],.tabelle--eng select{ width:100%; padding:8px 10px; border:1.5px solid var(--line); border-radius:8px; font:inherit; font-size:14.5px; background:#fff; } .tabelle--eng input:focus,.tabelle--eng select:focus{outline:none; border-color:var(--ink)} .tabelle--eng .schmal input,.tabelle--eng input.schmal{width:72px} .tabelle .mitte{text-align:center} .tabelle input[type=checkbox]{width:18px; height:18px; accent-color:var(--ink)} .unterpunkt td:first-child{padding-left:34px; position:relative} .unterpunkt td:first-child::before{content:"↳"; position:absolute; left:14px; top:12px; color:var(--grey)} .loeschen--klein{font-size:13.5px; padding:4px} /* Als Verweis statt als Knopf: .loeschen ist auf Flex-Zeilen gemuenzt (margin-left:auto) und braucht das hier nicht. */ .loeschen--verweis{display:inline-block; margin-left:0; padding:8px 0} /* Aufzaehlung im Fliesstext. ul ist global punktlos (Navigationen), was in einer echten Aufzaehlung zu drei Zeilen ohne erkennbare Trennung fuehrt. */ .liste{list-style:disc; padding-left:22px; margin:0 0 1em} .liste li{margin-bottom:6px} /* Formular in einer Reihe (Hinzufügen) */ .form--reihe{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; max-width:none} .form--reihe label{flex:1 1 190px} .form--reihe .btn{flex:none} /* Slider-Verwaltung */ .slides{display:grid; gap:18px} .slide{display:grid; grid-template-columns:230px 1fr; gap:20px; align-items:start; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:#fff} .slide img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:9px} .slide__felder{display:grid; gap:12px} .slide__zeile{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap} .slide__zeile .ankreuz{flex-direction:row; align-items:center; gap:8px; display:flex} @media (max-width:720px){.slide{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════ Kopfbereich statischer Seiten ═══════════════════════════════════════════════════════════ */ .seitenkopf{ position:relative; display:flex; align-items:flex-end; min-height:min(46vh,420px); overflow:hidden; /* Bildausschnitt leicht oberhalb der Mitte. Bei Gruppenfotos bleiben dadurch sowohl die Koepfe der hinteren Reihe als auch knieende Personen im sichtbaren Bereich; bei Landschaftsaufnahmen ist der Unterschied zur Mitte kaum wahrnehmbar. */ background:var(--ink) center 45% / cover no-repeat; } /* Derselbe Schleier wie im Slider - eine Einstellung, beide Stellen. */ .seitenkopf__veil{position:absolute; inset:0; background:var(--schleier)} .seitenkopf__body{position:relative; z-index:2; color:#fff; padding-block:56px 44px} .seitenkopf__ttl{ font-size:clamp(32px,5vw,60px); font-weight:600; letter-spacing:-.035em; color:#fff; text-shadow:0 3px 26px rgba(20,18,16,.38); animation:rise .8s var(--ease) both; } .seitenkopf .hero__kicker{color:#fff; opacity:.9} /* Ohne hinterlegtes Bild: ruhige Farbfläche statt leerer weisser Seite */ .seitenkopf--schlicht{ min-height:0; background:var(--bg-2); border-bottom:1px solid var(--line); } /* Ohne Bild ist die Flaeche hell - Schrift und Schatten muessen mit umschlagen. Die Ueberschrift und die kleine Zeile darueber setzen ihre Farbe SELBST (weiss, fuer das Foto darunter); eine Farbe nur am umschliessenden Kasten erreicht sie deshalb nicht. Beide muessen ausdruecklich genannt werden. Die kleine Zeile traegt die Klasse hero__kicker, nicht kicker - eine Regel auf .kicker ging hier ins Leere. */ .seitenkopf--schlicht .seitenkopf__body{padding-block:52px 46px; color:var(--ink)} .seitenkopf--schlicht .seitenkopf__ttl{color:var(--ink); text-shadow:none} .seitenkopf--schlicht .hero__kicker{color:var(--ink-2); opacity:1} /* Text danach etwas höher ansetzen – der Kopf trägt schon viel Gewicht */ .seitenkopf + .sec{padding-top:56px} /* Bilder im Fliesstext */ .artikel__text figure{margin:28px 0} .artikel__text figure img{width:100%; border-radius:var(--r); box-shadow:var(--shadow)} .artikel__text figcaption{margin-top:10px; font-size:14.5px; color:var(--ink-2)} .artikel__text .inlinebild{display:inline-block; vertical-align:middle; max-height:1.9em; width:auto; border-radius:5px; margin:0 3px} /* Bilderverwaltung */ .galerie{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px} .galerie__el{margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff} .galerie__el img{width:100%; aspect-ratio:3/2; object-fit:cover} .galerie__el figcaption{padding:12px 14px; display:grid; gap:8px} .galerie__el figcaption form{margin:0} .baustein{width:100%; padding:8px 10px; border:1.5px solid var(--line); border-radius:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; background:var(--bg-2); cursor:pointer} .baustein:focus{outline:none; border-color:var(--blue); background:#fff} /* ═══════════════════════════════════════════════════════════ Sponsoren – Laufband ═══════════════════════════════════════════════════════════ */ .sponsoren{background:var(--bg-2); overflow:hidden} .sec__head--mitte{justify-content:center; text-align:center; margin-bottom:38px} .kicker--mitte{justify-content:center} /* Wechselndes Wort in der Überschrift: fester Platz, damit die Zeile beim Wechsel nicht springt. Nur ein Wort ist jeweils sichtbar. */ .wechselwort{ display:inline-grid; vertical-align:baseline; color:var(--clay); } .wechselwort > span{ grid-area:1/1; opacity:0; animation:wortwechsel 12s infinite; } .wechselwort > span:nth-child(2){animation-delay:3s} .wechselwort > span:nth-child(3){animation-delay:6s} .wechselwort > span:nth-child(4){animation-delay:9s} @keyframes wortwechsel{ 0%,2% {opacity:0; transform:translateY(.25em)} 4%,23% {opacity:1; transform:none} 27%,100%{opacity:0; transform:translateY(-.25em)} } /* Das Band besteht aus zwei identischen Reihen. Verschiebt man den Behälter um genau eine Reihenbreite (50 %), sieht der Sprung zurück auf 0 nahtlos aus – die Logos laufen endlos von rechts nach links. */ .band{position:relative; padding-block:10px} .band::before,.band::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; } .band::before{left:0; background:linear-gradient(to right, var(--bg-2), transparent)} .band::after {right:0; background:linear-gradient(to left, var(--bg-2), transparent)} .band__lauf{display:flex; width:max-content; animation:bandlauf 55s linear infinite} .band:hover .band__lauf{animation-play-state:paused} .band__reihe{display:flex; align-items:center} .band__reihe li{ flex:none; width:190px; height:100px; margin-inline:14px; display:flex; align-items:center; justify-content:center; } .band__reihe img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(100%); opacity:.72; transition:filter .3s, opacity .3s, transform .3s var(--ease); } .band__reihe li:hover img{filter:none; opacity:1; transform:scale(1.06)} @keyframes bandlauf{ from{transform:translateX(0)} to {transform:translateX(-50%)} } @media (max-width:620px){ .band__reihe li{width:140px; height:78px; margin-inline:10px} .band::before,.band::after{width:45px} } /* Wer Bewegung reduziert haben möchte, bekommt ein ruhiges Raster */ @media (prefers-reduced-motion:reduce){ .band__lauf{animation:none; flex-wrap:wrap; width:auto; justify-content:center} .band__reihe{flex-wrap:wrap; justify-content:center} .band__reihe[aria-hidden="true"]{display:none} .wechselwort > span{animation:none; opacity:0} .wechselwort > span:first-child{opacity:1} } /* Logo-Vorschau in der Sponsorenverwaltung */ .logozelle{width:120px} .logozelle img{width:110px; height:52px; object-fit:contain; background:var(--bg-2); border-radius:6px; padding:5px} /* Mehrere Bilder direkt untereinander werden zum Raster */ .artikel__text .galerie-inline{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:28px 0; } .artikel__text .galerie-inline figure{margin:0} .artikel__text .galerie-inline img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:9px; box-shadow:none; transition:transform .3s var(--ease); } .artikel__text .galerie-inline figure:hover img{transform:scale(1.03)} .artikel__text .galerie-inline figcaption{font-size:13px; margin-top:6px} @media (max-width:620px){ .artikel__text .galerie-inline{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px} } /* Meldungskarte ohne hinterlegtes Bild */ .card__img--leer{ display:flex; align-items:center; justify-content:center; background:var(--bg-2); border-bottom:1px solid var(--line); } .card__img--leer img{ width:auto; height:52%; object-fit:contain; opacity:.35; transition:none; } .card:hover .card__img--leer img{transform:none} /* Besucherzaehler in der Fusszeile */ .ft__zaehler{ font-size:13px; opacity:.55; letter-spacing:.01em; margin:0; cursor:default; } @media (max-width:720px){ .ft__zaehler{order:3; width:100%; text-align:center; margin-top:6px} } /* Vereinsdaten: viele kurze Felder. Ueber die volle Breite der uebrigen Redaktionsseiten waeren einzeilige Eingaben unangenehm lang, darum zwei Spalten. Die Schaltflaeche behaelt eine eigene Zeile. */ /* Eigenstaendig einsetzbar (nicht mehr nur zusammen mit .form am selben Element): braucht deshalb sein eigenes display:grid/gap statt das von .form zu erben. Gruppiert Felder der Vereinsdaten-Seite unterhalb einer Zwischenueberschrift in zwei Spalten. */ .form--raster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; row-gap:18px; margin-top:18px; } .form--raster .btn{grid-column:1 / -1} @media (max-width:820px){ .form--raster{grid-template-columns:1fr} } /* ═══ Besucherzahlen in der Redaktion ═══════════════════════ */ .kennzahlen{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:26px; } /* Steht eine Ueberschrift davor, bringt die bereits ihren Abstand mit. */ .abstand + .kennzahlen{margin-top:0} /* Seitenaufrufe in der Akzentfarbe. Die beiden Reihen sind gleich aufgebaut; die Farbe sagt auf einen Blick, welche man gerade liest. */ .kennzahl--akzent{ background:rgba(193,102,60,.06); border-color:rgba(193,102,60,.22); } .kennzahl--akzent .kennzahl__wert{color:var(--clay)} .kennzahl{ background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:18px 16px; display:flex; flex-direction:column; gap:4px; } .kennzahl__wert{font-size:26px; font-weight:800; color:var(--blue); line-height:1.1} .kennzahl__txt{font-size:13px; font-weight:600; color:var(--muted)} .kennzahl__txt em{display:block; font-style:normal; opacity:.7; font-weight:500} @media (max-width:1080px){.kennzahlen{grid-template-columns:repeat(3,1fr)}} @media (max-width:620px){.kennzahlen{grid-template-columns:repeat(2,1fr)}} /* Balken: schlichte Rechtecke, deren Hoehe im style-Attribut steht. Bewusst kein Diagrammwerkzeug von aussen - das waere mit der Inhaltsrichtlinie nicht vereinbar und fuer sechs Balkenreihen ueberzogen. */ .diagramm{ display:flex; align-items:flex-end; gap:3px; height:190px; margin:16px 0 8px; padding:12px 12px 0; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); overflow-x:auto; } .diagramm--breit{gap:10px} .diagramm__spalte{ flex:1 1 0; min-width:14px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; } .diagramm__balken{ background:var(--blue); border-radius:4px 4px 0 0; min-height:2px; transition:background .15s; } .diagramm__spalte:hover .diagramm__balken{background:var(--clay)} .diagramm__marke{ font-size:10.5px; font-weight:600; color:var(--muted); text-align:center; white-space:nowrap; } /* Anklickbare Tage: der Balken filtert die Liste darunter auf diesen Tag. Ohne eigene Farbe - der Zeiger und der Titeltext sagen genug, und eine zweite Signalfarbe im Diagramm wuerde die Ablesbarkeit stoeren. */ a.diagramm__spalte{text-decoration:none; cursor:pointer} a.diagramm__spalte:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px} /* Auf dem Handy breitere Spalten: 14px sind mit dem Finger nicht sicher zu treffen. Das Diagramm laesst sich ohnehin seitlich schieben. */ @media (max-width:620px){ .diagramm__spalte{min-width:24px} } /* Der ausgewaehlte Tag bleibt sichtbar, auch wenn man weiterscrollt. */ .diagramm__spalte.is-gewaehlt .diagramm__balken{ box-shadow:0 0 0 2px var(--bg-2), 0 0 0 4px var(--ink); } .diagramm__spalte.is-gewaehlt .diagramm__marke{color:var(--ink); font-weight:800} .filter-hinweis{margin-top:-8px; margin-bottom:12px} /* Aufrufe in der Akzentfarbe - passend zur Kachelreihe darueber. Beim Ueberfahren wird der Balken heller statt, wie im blauen Diagramm, waermer: aus Terrakotta noch mehr Terrakotta waere kein Unterschied. */ .diagramm--akzent .diagramm__balken{background:var(--clay)} .diagramm--akzent .diagramm__spalte:hover .diagramm__balken{background:var(--clay-l)} /* Laufender Monat: heller, weil der Balken noch waechst */ .diagramm__balken--laufend{background:var(--sand-2)} .diagramm__spalte:hover .diagramm__balken--laufend{background:var(--clay)} /* Meistgelesene Seiten */ /* .tabelle bringt min-width:760px mit - noetig fuer die breiten Tabellen der Redaktion, hier aber zu viel: die Tabelle muesste seitlich scrollen, obwohl ihr Inhalt laengst passt. */ .tabelle--top{min-width:420px} .tabelle--top td{vertical-align:middle} /* Titelspalte nimmt den Rest, die uebrigen nur ihre Inhaltsbreite - sonst spreizen sie sich und die Tabelle muss seitlich scrollen. */ .tabelle--top th:not(:first-child), .tabelle--top td:not(:first-child){width:1%; white-space:nowrap} .tabelle--top .pfad{display:block; color:var(--muted); font-size:12px; margin-top:2px} .anteil-kopf{width:130px} .anteil{width:130px} .anteil__balken{ display:block; height:8px; border-radius:4px; background:var(--blue); min-width:4px; } @media (max-width:720px){ .anteil,.anteil-kopf{display:none} } /* ═══ Bild gross anzeigen ═══════════════════════════════════ */ /* Mediathek: Bilder eines Albums. Feste Kachelhoehe mit object-fit, damit Hoch- und Querformat gemischt ein ruhiges Raster ergeben - gross zu sehen ist das Bild ohnehin erst beim Anklicken, und dort unbeschnitten. */ .galerie{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; } .galerie img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:10px; background:var(--bg-2); transition:transform .34s var(--ease), box-shadow .34s var(--ease); } .galerie img:hover{transform:translateY(-4px); box-shadow:var(--shadow-h)} .galerie-zurueck{margin-top:30px} /* Rueckweg am Seitenanfang. Der Pfeil steht vorn und zeigt nach links - der Verweis am Seitenende fuehrt weiter (Pfeil rechts), dieser hier zurueck, und das soll man auf den ersten Blick unterscheiden. */ /* Steht direkt ueber den Bildern. Die Galerie bringt sonst ihren eigenen Abstand nach oben mit - zusammen waere die Luecke zu gross. */ .zurueck-oben{margin-bottom:22px} .zurueck-oben + .galerie{margin-top:0} .zurueck-oben::after{content:none} .zurueck-oben::before{content:"←"; transition:transform .25s var(--ease)} .zurueck-oben:hover::before{transform:translateX(-6px)} @media (max-width:1080px){.galerie{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.galerie{grid-template-columns:repeat(2,1fr); gap:12px}} .zoombar{cursor:zoom-in} .zoombar:focus-visible{outline:3px solid var(--blue); outline-offset:3px} .lupe{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; gap:10px; padding:28px; background:rgba(10,14,18,.92); opacity:0; transition:opacity .18s ease; } .lupe.is-auf{opacity:1} .lupe__bild{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; box-shadow:0 24px 70px rgba(0,0,0,.5); } .lupe__zu{ position:absolute; top:14px; right:18px; width:46px; height:46px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:30px; line-height:1; cursor:pointer; } .lupe__pfeil{ flex:0 0 auto; width:52px; height:52px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:32px; line-height:1; cursor:pointer; } .lupe__zu:hover,.lupe__pfeil:hover{background:rgba(255,255,255,.24)} .lupe__zu:focus-visible,.lupe__pfeil:focus-visible{outline:3px solid #fff; outline-offset:2px} .lupe__pfeil[hidden]{display:none} .lupe__zaehler{ position:absolute; left:0; right:0; bottom:16px; margin:0; text-align:center; color:rgba(255,255,255,.75); font-size:14px; font-weight:600; } @media (max-width:620px){ .lupe{padding:12px; gap:4px} .lupe__pfeil{width:42px; height:42px; font-size:26px} .lupe__zu{top:8px; right:10px} } @media (prefers-reduced-motion:reduce){ .lupe{transition:none} } /* ═══════════════════════════════════════════════════════════════ Shop – Produkte Ergaenzt das uebernommene Design. Bewusst ans Ende gehaengt und in einem eigenen Block: so bleibt erkennbar, was zum Shop dazugekommen ist und was aus dem urspruenglichen Entwurf stammt. ═══════════════════════════════════════════════════════════════ */ /* ── Seitenkopf der Uebersichtsseiten ───────────────────────── */ .h1{font-size:clamp(32px,4.2vw,50px); line-height:1.1; margin-bottom:14px} .kopf{padding:70px 0 0} .kopf__txt{max-width:60ch; margin-top:10px; color:var(--ink-2)} /* ── Kategoriefilter ────────────────────────────────────────── */ .filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px} .filter__btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 17px; border:1px solid var(--line); border-radius:999px; font-size:14.5px; text-decoration:none; color:var(--ink-2); background:#fff; transition:background .2s, border-color .2s, color .2s; } .filter__btn:hover{border-color:var(--clay); color:var(--ink)} .filter__btn.is-active{background:var(--ink); border-color:var(--ink); color:#fff} .filter__zahl{opacity:.6; font-size:13px} /* ── Produktraster und -kachel ──────────────────────────────── */ .raster{display:grid; grid-template-columns:repeat(3,1fr); gap:30px} .card--produkt .card__body{display:flex; flex-direction:column; gap:2px} /* Der Preis steht bewusst NICHT gross und fett da. Bei durchweg kleinen Betraegen wirkt das marktschreierisch; das Vorbild setzt ihn in Fliesstextgroesse unter den Namen. */ .preis{font-weight:600; font-size:16px; margin:4px 0 2px} .preis--gross{font-size:26px; font-weight:600; margin:18px 0 2px; letter-spacing:-.02em} .tag--aus{background:var(--sand-2); color:var(--ink)} /* ── Produktseite ───────────────────────────────────────────── */ .produkt{padding:60px 0 90px} .produkt__in{display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:start} .produkt__gross{display:block; border-radius:var(--r); overflow:hidden; background:var(--sand)} .produkt__gross img{width:100%; height:auto; display:block} .produkt__gross--leer{display:grid; place-items:center; aspect-ratio:4/3} .produkt__gross--leer img{width:38%; opacity:.25} .produkt__reihe{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px} .produkt__mini{ width:86px; height:86px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--sand); transition:border-color .2s; } .produkt__mini:hover{border-color:var(--clay)} .produkt__mini img{width:100%; height:100%; object-fit:cover; display:block} .produkt__mini.is-active{border-color:var(--ink)} .produkt__teaser{font-size:19px; margin-bottom:6px} .produkt__mwst{font-size:14px; opacity:.7; margin-bottom:16px; line-height:1.5} .produkt__lager{font-weight:600; margin-bottom:22px} .produkt__lager--aus{color:#9A4A32} .produkt__acts{margin-bottom:26px} .produkt__text{margin-bottom:24px} .btn--aus{opacity:.5} /* Angaben zum Artikel: zweispaltige Liste aus Bezeichnung und Wert */ .daten{display:grid; grid-template-columns:auto 1fr; gap:6px 22px; font-size:15px} .daten dt{font-weight:600} .daten dd{margin:0} .zurueck{margin-top:28px} /* ── Bilderpflege in der Redaktion ──────────────────────────── */ .bildliste{display:flex; flex-direction:column; gap:14px; margin:16px 0 30px} .bildliste__zeile{ display:flex; gap:16px; align-items:flex-end; padding:12px; border:1px solid var(--line); border-radius:var(--r); } .bildliste__zeile > img{width:120px; height:90px; object-fit:cover; border-radius:8px; flex:none} .bildliste__form{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; flex:1; margin:0} .bildliste__form label{flex:1; min-width:150px} .form--rand{margin-top:40px; padding-top:20px; border-top:1px solid var(--line)} /* Titelbild in der Produkttabelle der Redaktion */ /* Vorschaubild in der Produktliste. max-width:none hebt die globale Regel img{max-width:100%} auf. Ohne das schrumpft das Bild auf die Breite der Zelle, und die ist bei zehn Spalten und je 36px Innenabstand kleiner als die 56px des Bildes - herausgekommen ist ein 9 Pixel breiter Streifen, der wie ein verirrtes Zeichen aussah. Erst mit max-width:none fordert das Bild seine Breite ein, und die Spalte raeumt sie ihm ein. */ .tabelle .mini{width:92px; padding-right:0} .tabelle .mini img{width:56px; height:42px; max-width:none; object-fit:cover; border-radius:6px; display:block; background:var(--sand)} @media (max-width:900px){ .raster{grid-template-columns:repeat(2,1fr)} .produkt__in{grid-template-columns:1fr; gap:32px} } @media (max-width:620px){ .raster{grid-template-columns:1fr} .bildliste__zeile{flex-direction:column; align-items:stretch} .bildliste__zeile > img{width:100%; height:160px} } /* ── Vertrauensleiste unter dem Seitenkopf ────────────────────── Kurze Belege statt Werbetext: woher, wie schnell, wie erreichbar. Beim Vorbild steht sie direkt unter dem grossen Bild und faengt den Blick ab, bevor er ins Sortiment wandert. Die Texte kommen aus den Shopdaten; ohne Eintrag entfaellt die Leiste ganz. */ .vertrauen{background:var(--bg-2); border-bottom:1px solid var(--line)} .vertrauen__reihe{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 42px; padding-block:18px; font-size:13.5px; color:var(--ink-2); } .vertrauen__punkt{display:inline-flex; align-items:center; gap:9px} /* Der Punkt vor jedem Beleg ersetzt ein Symbolbild - er braucht keine Datei, skaliert mit der Schrift und bleibt in jeder Sprache richtig. */ .vertrauen__punkt::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--clay); flex:none; } @media (max-width:620px){ .vertrauen__reihe{gap:10px 24px; font-size:12.5px} } /* ── Auswahl von Groesse und Farbe ────────────────────────────── Die Felder stehen zwischen Preis und Verfuegbarkeit, also genau dort, wo die Auswahl beides veraendert. */ .wahl{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin:22px 0 20px} .wahl__feld{display:flex; flex-direction:column; gap:6px; min-width:150px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2)} .wahl__feld select{ padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-btn); background:#fff; color:var(--ink); font:inherit; font-size:15.5px; font-weight:400; text-transform:none; letter-spacing:normal; } .wahl__feld select:focus{outline:2px solid var(--clay); outline-offset:1px} /* Ohne JavaScript bleibt dieser Knopf sichtbar und schickt das Formular ab; app.js blendet ihn aus, sobald es die Auswahl selbst uebernimmt. */ .wahl__knopf{padding:11px 20px} /* Muss sein: .btn setzt display:inline-flex und ist damit staerker als die eingebaute Regel des Browsers fuer [hidden]. Der Knopf oben blieb dadurch sichtbar, obwohl app.js ihn ausgeblendet hatte. Die Regel gilt bewusst fuer alle Elemente - die Falle steckt in jedem Baustein, der display setzt. */ [hidden]{display:none !important} /* Schmale Eingabefelder in der Kombinationstabelle der Redaktion */ .tabelle .eng{width:100%; min-width:80px; padding:7px 9px; border:1px solid var(--line); border-radius:var(--r); font:inherit; font-size:14px} .h4{font-size:17px; font-weight:600; margin-bottom:8px} /* Abschnittsueberschriften in der Produktmaske brauchen mehr Luft als das allgemeine .mt: darueber endet jeweils ein Formular mit Knopf, und ohne Abstand liest sich die neue Ueberschrift wie dessen Beschriftung. */ .wrap--schmal .h3.mt{margin-top:52px} /* ── Farbeinstellung in der Redaktion ─────────────────────────── Die Werte hier sind bewusst fest und nicht an die Farbtokens gebunden: Wer eine unglueckliche Farbe ausprobiert, soll die Maske trotzdem noch bedienen koennen. */ .vorlagen{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 34px} .vorlage{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:8px 14px 8px 8px; border:1px solid #E7E1DA; border-radius:999px; background:#fff; font:inherit; font-size:14px; color:#141210; transition:border-color .2s; } .vorlage:hover{border-color:#141210} .vorlage__felder{display:flex; border-radius:999px; overflow:hidden; flex:none} .vorlage__felder span{width:16px; height:16px; display:block} .vorlage__name{white-space:nowrap} .farbfeld{display:flex; gap:10px; align-items:center} .farbfeld input[type=color]{ width:52px; height:38px; padding:2px; flex:none; cursor:pointer; border:1px solid #E7E1DA; border-radius:6px; background:#fff; } .farbfeld input[type=text]{flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase} /* Vorschau: ein Ausschnitt der Seite im Kleinen */ .farbprobe{border:1px solid #E7E1DA; border-radius:10px; overflow:hidden; margin-bottom:34px} .farbprobe__band{padding:9px 18px; font-size:12.5px; font-weight:600; letter-spacing:.02em} .farbprobe__flaeche{padding:26px 22px 28px} .farbprobe__kicker{display:flex; align-items:center; gap:11px; margin:0 0 10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.18em} .farbprobe__kicker span{width:26px; height:1px; display:block; flex:none} .farbprobe__ttl{font-size:27px; font-weight:600; letter-spacing:-.03em; margin:0 0 8px} .farbprobe__txt{font-size:14.5px; margin:0 0 18px; max-width:46ch} .farbprobe__knopf{display:inline-block; padding:11px 22px; border-radius:8px; font-size:14px; font-weight:600} /* ── Schleier-Einstellung in der Redaktion ──────────────────── */ .regler{display:flex; align-items:center; gap:12px} .regler input[type=range]{flex:1; accent-color:#141210} .regler output{min-width:52px; text-align:right; font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; color:#141210} /* Seitenverhaeltnis nahe am echten Seitenkopf (dort etwa 3:2). Eine flachere Vorschau zeigt einen anderen Bildausschnitt - und damit eine Helligkeit, die auf der fertigen Seite gar nicht vorkommt. */ .schleierprobe{position:relative; border-radius:10px; overflow:hidden; margin:6px 0 12px; aspect-ratio:3/2; background:#141210} .schleierprobe__bild{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%} .schleierprobe__schleier{position:absolute; inset:0} .schleierprobe__text{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 34px; color:#fff; text-shadow:0 1px 24px rgba(20,18,16,.45)} .schleierprobe__kicker{margin:0 0 8px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; opacity:.9} .schleierprobe__ttl{margin:0; font-size:clamp(26px,3.6vw,42px); font-weight:600; letter-spacing:-.03em; line-height:1.05} /* ── Warenkorb und Kasse ──────────────────────────────────────── Der Warenkorb ist eine Liste, keine Tabelle: auf dem Handy soll jede Position untereinander stehen koennen, ohne dass Spalten verrutschen. */ .korb{display:flex; flex-direction:column; gap:2px; margin-bottom:22px} .korb__zeile{ display:grid; grid-template-columns:88px 1fr 130px 110px; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); } .korb__bild{display:block; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--sand)} .korb__bild img{width:100%; height:100%; object-fit:cover; display:block} .korb__was{display:flex; flex-direction:column; gap:3px; min-width:0} .korb__titel{font-weight:600; font-size:16px} .korb__menge{display:flex; flex-direction:column; gap:3px} .korb__menge input{width:90px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r); font:inherit} .korb__preis{text-align:right; font-weight:600; font-size:17px} .korb__fuss{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:30px} .summe{max-width:420px; margin-left:auto} .summe__zeile{display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid var(--line); font-size:15px} /* Nur die aeussere letzte Spalte, der Betrag. Ohne ">" trifft die Regel auch verschachtelte Spans - seit die Position ein Bild hat, waere das der Titel gewesen, und der duerfte dann nicht mehr umbrechen. */ .summe__zeile > span:last-child{white-space:nowrap; font-variant-numeric:tabular-nums} .summe__zeile--gesamt{font-size:19px; font-weight:600; border-bottom:0} /* Position einer Bestellung mit Vorschaubild. .pos__bild behaelt seine Groesse auch ohne Bild - sonst ruecken Zeilen ohne Bild (geloeschtes Produkt) nach links und die Liste franst aus. max-width:none wie in der Produktliste: die globale Regel img{max-width:100%} wuerde das Bild sonst zusammenschieben. */ .pos__was{display:flex; align-items:flex-start; gap:14px} .pos__bild{flex:0 0 56px; width:56px; height:42px; border-radius:6px; background:var(--sand); overflow:hidden; display:block} .pos__bild img{width:56px; height:42px; max-width:none; object-fit:cover; display:block} .summe .klein{text-align:right; margin-top:8px} .kasse{display:grid; grid-template-columns:1fr 340px; gap:50px; align-items:start} .kasse__uebersicht{background:var(--bg-2); border-radius:var(--r); padding:24px 26px; position:sticky; top:110px} .produkt__menge{display:inline-flex; flex-direction:column; gap:4px; margin-right:14px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2)} .produkt__menge input{width:88px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-btn); font:inherit; font-size:15.5px; font-weight:400; text-transform:none; letter-spacing:normal} .produkt__acts{display:flex; align-items:flex-end; gap:0; flex-wrap:wrap} @media (max-width:900px){ .kasse{grid-template-columns:1fr; gap:32px} .kasse__uebersicht{position:static} } @media (max-width:620px){ .korb__zeile{grid-template-columns:64px 1fr; gap:12px} .korb__menge,.korb__preis{grid-column:2} .korb__preis{text-align:left} .summe{max-width:none} }