/* ═══════════════════════════════════════════════════════════ TC Ingelfingen – Prototyp Startseite Farben aus dem Vereinslogo: Blau #005BAB, Grau #BCBEC0 Akzent Terrakotta #C1663C (Sandplatz) ═══════════════════════════════════════════════════════════ */ :root{ --blue:#005BAB; --blue-d:#00427C; --blue-dd:#002A50; --clay:#C1663C; --clay-l:#E08556; --grey:#BCBEC0; --ink:#12171C; --ink-2:#4A555F; --line:#E3E7EA; --bg:#FFFFFF; --bg-2:#F5F7F9; --wrap:1240px; --r:14px; --ease:cubic-bezier(.22,.9,.28,1); --shadow:0 2px 4px rgba(18,23,28,.04), 0 12px 32px rgba(18,23,28,.08); --shadow-h:0 4px 8px rgba(18,23,28,.06), 0 22px 52px rgba(0,91,171,.16); --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:17px; line-height:1.62; -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.06; letter-spacing:-.028em; font-weight:800} 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:13px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--blue); } .dash{width:34px; height:3px; background:var(--clay); border-radius:2px; 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:15px 30px; border-radius:100px; border:2px solid var(--blue); background:var(--blue); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em; cursor:pointer; transition:transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s; } .btn:hover{background:var(--blue-d); border-color:var(--blue-d); transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,91,171,.32)} .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(--blue)} .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 ──────────────────────────────────────────────── */ .topbar{background:var(--blue-dd); color:rgba(255,255,255,.72); font-size:13.5px} .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:#fff} .topbar__login{color:#fff; font-weight:700} /* ── 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} .brand{display:flex; align-items:center; gap:13px} .brand__logo{height:52px; width:auto; transition:height .3s var(--ease)} .hdr.is-stuck .brand__logo{height:44px} .brand__txt{display:flex; flex-direction:column; line-height:1.15} .brand__txt strong{font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--blue)} .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(0,91,171,.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)} .hero__veil{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(0,42,80,.90) 0%, rgba(0,42,80,.62) 42%, rgba(0,42,80,.18) 78%), linear-gradient(to top, rgba(0,20,38,.62), transparent 45%); } .hero__body{position:relative; z-index:2; color:#fff; padding-block:120px 150px} .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} .hero__ttl em{font-style:normal; color:#fff; background:linear-gradient(transparent 62%, var(--clay) 62%, var(--clay) 92%, transparent 92%); padding-inline:4px} @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)} .card{ flex:0 0 calc((100% - 60px) / 3); background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s; } .card:hover{transform:translateY(-7px); box-shadow:var(--shadow-h); border-color:transparent} .card__img{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--grey)} .card__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)} .card:hover .card__img img{transform:scale(1.07)} .card__body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1} .card__meta{display:flex; align-items:center; gap:12px; margin-bottom:11px; font-size:13px; font-weight:700; color:var(--ink-2)} .tag{padding:3px 11px; border-radius:100px; background:rgba(0,91,171,.09); color:var(--blue); font-size:11.5px; text-transform:uppercase; letter-spacing:.09em} .card__ttl{font-size:21px; margin-bottom:11px; line-height:1.24} .card__ttl a{transition:color .2s} .card:hover .card__ttl a{color:var(--blue)} .card__txt{font-size:15.5px; color:var(--ink-2); flex:1; margin-bottom:16px} .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:linear-gradient(115deg,var(--blue-dd),var(--blue) 58%,#0570CE); color:#fff; position:relative; overflow:hidden} .cta::after{content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%; border:44px solid rgba(255,255,255,.07)} .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 */ .ft__logo{height:76px; 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} /* 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(--blue)} .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} /* 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(--blue)} .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(--blue)} .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(--blue)} .adminnav a.is-on{color:var(--blue); border-bottom-color:var(--blue)} .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(--blue)} .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(--blue)} .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} /* 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; } .seitenkopf__veil{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(0,42,80,.86) 0%, rgba(0,42,80,.52) 48%, rgba(0,42,80,.14) 82%), linear-gradient(to top, rgba(0,20,38,.66), transparent 52%); } .seitenkopf__body{position:relative; z-index:2; color:#fff; padding-block:56px 44px} .seitenkopf__ttl{ font-size:clamp(32px,5vw,60px); font-weight:900; letter-spacing:-.035em; color:#fff; text-shadow:0 3px 26px rgba(0,20,40,.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:linear-gradient(115deg,var(--blue-dd),var(--blue) 62%,#0570CE); } .seitenkopf--schlicht .seitenkopf__body{padding-block:52px 46px} /* 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. */ .form--raster{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px} .form--raster .btn{grid-column:1 / -1} @media (max-width:820px){ .form--raster{grid-template-columns:1fr} }