Upload files to "assets/css"
This commit is contained in:
daniel.reimann committed
1 parent
03f5520ec2
commit
2c27380208
1 file changed
+505
@@ -0,0 +1,505 @@
|
|||||||
|
:root{
|
||||||
|
--red:#c8102e;
|
||||||
|
--red-hover:#ab0d27;
|
||||||
|
--red-bar:#a01c2f;
|
||||||
|
--red-deep:#871726;
|
||||||
|
--menu-a:#c8102e;
|
||||||
|
--menu-b:#8c0d1e;
|
||||||
|
--ink:#16202e;
|
||||||
|
--ink-soft:#5a6472;
|
||||||
|
--ink-faint:#8a929e;
|
||||||
|
--paper:#f7f8fa;
|
||||||
|
--card:#ffffff;
|
||||||
|
--line:#e8eaee;
|
||||||
|
--line-soft:#eff1f4;
|
||||||
|
--soft:#f0f1f4;
|
||||||
|
--shadow:0 1px 2px rgba(22,32,46,.05), 0 10px 30px -18px rgba(22,32,46,.25);
|
||||||
|
--shadow-lg:0 24px 60px -24px rgba(22,32,46,.45);
|
||||||
|
--font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
/* Bewusst nur ein Theme: die Seite soll exakt wie die Vorlagen aussehen,
|
||||||
|
unabhaengig vom Dark-Mode-Setting des Geraets. */
|
||||||
|
|
||||||
|
*{box-sizing:border-box}
|
||||||
|
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; font-size:15px}
|
||||||
|
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.015em; line-height:1.25}
|
||||||
|
p{margin:0}
|
||||||
|
a{color:inherit; text-decoration:none}
|
||||||
|
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
|
||||||
|
img,svg{display:block; max-width:100%}
|
||||||
|
ul{margin:0; padding:0; list-style:none}
|
||||||
|
:focus-visible{outline:2px solid var(--red); outline-offset:2px}
|
||||||
|
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
|
||||||
|
[hidden]{display:none!important}
|
||||||
|
|
||||||
|
.wrap{max-width:1240px; margin:0 auto; padding-inline:24px}
|
||||||
|
@media (max-width:720px){ .wrap{padding-inline:16px} }
|
||||||
|
|
||||||
|
/* ============ LOGO ============ */
|
||||||
|
.brand{display:flex; align-items:center; gap:11px}
|
||||||
|
.brand .flame{flex:none; color:var(--red)}
|
||||||
|
.brand .word{line-height:1}
|
||||||
|
.brand .l1{display:block; font-size:13px; font-weight:800; letter-spacing:.13em; color:var(--ink)}
|
||||||
|
.brand .l2{display:block; font-size:27px; font-weight:800; letter-spacing:.005em; color:var(--red); margin-top:2px}
|
||||||
|
.brand.on-red .flame{color:#fff}
|
||||||
|
.brand.on-red .l1,.brand.on-red .l2{color:#fff}
|
||||||
|
|
||||||
|
/* ============ UTILITY BAR ============ */
|
||||||
|
.utilitybar{background:var(--red-bar); color:#fff}
|
||||||
|
.utilitybar .wrap{display:flex; justify-content:flex-end; gap:26px; height:34px; align-items:center; font-size:12.5px; font-weight:500}
|
||||||
|
.utilitybar a{display:flex; align-items:center; gap:7px; opacity:.94}
|
||||||
|
.utilitybar a:hover{opacity:1}
|
||||||
|
.utilitybar svg{width:13px; height:13px}
|
||||||
|
@media (max-width:1080px){ .utilitybar{display:none} }
|
||||||
|
|
||||||
|
/* ============ HEADER ============ */
|
||||||
|
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:#fff; border-bottom:1px solid var(--line)}
|
||||||
|
.headrow{display:flex; align-items:center; gap:26px; height:92px}
|
||||||
|
.headrow .brand{margin-right:-14px; gap:13px}
|
||||||
|
.headrow .brand .flame{width:70px; height:70px}
|
||||||
|
.headrow .brand .l1{font-size:14.5px}
|
||||||
|
.headrow .brand .l2{font-size:31px}
|
||||||
|
.tagline{font-size:10px; line-height:1.35; color:var(--ink-soft); font-weight:500; margin-right:auto;
|
||||||
|
white-space:nowrap; position:relative; top:8px}
|
||||||
|
@media (max-width:1180px){ .tagline{display:none} }
|
||||||
|
|
||||||
|
nav.primary{display:flex; align-items:center; gap:19px; margin-left:auto}
|
||||||
|
nav.primary a{font-size:13px; font-weight:500; color:#3d4757; white-space:nowrap; padding:30px 0; position:relative}
|
||||||
|
nav.primary a:hover{color:var(--red)}
|
||||||
|
nav.primary a.is-active{color:var(--red); font-weight:600}
|
||||||
|
nav.primary a.is-active::after{content:""; position:absolute; left:0; right:0; bottom:27px; height:2px; background:var(--red); border-radius:2px}
|
||||||
|
@media (max-width:1080px){ nav.primary{display:none} }
|
||||||
|
|
||||||
|
.btn-notruf{display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; font-weight:700; font-size:14.5px;
|
||||||
|
padding:13px 21px; border-radius:8px; white-space:nowrap; letter-spacing:.01em}
|
||||||
|
.btn-notruf:hover{background:var(--red-hover)}
|
||||||
|
.btn-notruf svg{width:16px; height:16px}
|
||||||
|
.burger{display:none; width:40px; height:40px; align-items:center; justify-content:center; color:var(--red); margin-left:4px}
|
||||||
|
.burger svg{width:26px; height:26px}
|
||||||
|
|
||||||
|
@media (max-width:1080px){
|
||||||
|
.headrow{height:62px; gap:10px}
|
||||||
|
.headrow .brand{margin-right:auto}
|
||||||
|
.headrow .brand .flame{width:30px; height:30px}
|
||||||
|
.headrow .brand .l1{font-size:9.5px; letter-spacing:.12em}
|
||||||
|
.headrow .brand .l2{font-size:18.5px}
|
||||||
|
nav.primary{display:none}
|
||||||
|
.btn-notruf{padding:9px 14px; font-size:14px; gap:7px; border-radius:8px}
|
||||||
|
.btn-notruf .lbl-long{display:none}
|
||||||
|
.burger{display:flex}
|
||||||
|
|
||||||
|
/* Mobiles Design: roter Header mit weissem Logo (wie Vorlage) */
|
||||||
|
header.site{background:var(--red); border-bottom-color:transparent}
|
||||||
|
header.site .brand .flame{color:#fff}
|
||||||
|
header.site .brand .l1,
|
||||||
|
header.site .brand .l2{color:#fff}
|
||||||
|
header.site .btn-notruf{background:transparent; border:1.6px solid rgba(255,255,255,.85); color:#fff; padding:7px 14px}
|
||||||
|
header.site .btn-notruf:hover{background:rgba(255,255,255,.15)}
|
||||||
|
header.site .burger{color:#fff}
|
||||||
|
}
|
||||||
|
@media (min-width:1081px){ .btn-notruf .lbl-short{display:none} }
|
||||||
|
|
||||||
|
/* ============ MOBILE TABBAR ============ */
|
||||||
|
.tabbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:38; background:var(--red);
|
||||||
|
padding:9px 4px calc(9px + env(safe-area-inset-bottom,0px))}
|
||||||
|
@media (max-width:720px){ .tabbar{display:flex} body{padding-bottom:70px} }
|
||||||
|
.tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:600; color:rgba(255,255,255,.72); padding:3px 0}
|
||||||
|
.tabbar button svg{width:21px; height:21px}
|
||||||
|
.tabbar button.is-active{color:#fff}
|
||||||
|
|
||||||
|
/* ============ MOBILE MENU (slides in from the RIGHT) ============ */
|
||||||
|
.menu-scrim{position:fixed; inset:0; background:rgba(12,6,8,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:59}
|
||||||
|
.menu-scrim.is-open{opacity:1; pointer-events:auto}
|
||||||
|
.menu-panel{position:fixed; top:0; right:0; bottom:0; z-index:60; width:min(370px,88vw);
|
||||||
|
background:
|
||||||
|
radial-gradient(130% 55% at 12% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
|
||||||
|
linear-gradient(180deg, #c31329 0%, #ab1123 38%, #930f1e 68%, #7d0c19 100%);
|
||||||
|
color:#fff;
|
||||||
|
display:flex; flex-direction:column; transform:translateX(100%);
|
||||||
|
transition:transform .32s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg);
|
||||||
|
padding:calc(22px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
|
||||||
|
.menu-panel.is-open{transform:translateX(0)}
|
||||||
|
.menu-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:24px; padding-inline:6px}
|
||||||
|
.menu-top .brand .flame{width:40px; height:40px}
|
||||||
|
.menu-top .brand .l1{font-size:12px}
|
||||||
|
.menu-top .brand .l2{font-size:26px}
|
||||||
|
.menu-close{width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#fff; margin-top:2px}
|
||||||
|
.menu-close svg{width:24px; height:24px}
|
||||||
|
.menu-scroll{flex:1; overflow-y:auto; margin-inline:-6px; padding-inline:6px}
|
||||||
|
.menu-row{display:flex; align-items:center; gap:14px; padding:13px 12px; font-weight:700; font-size:16px; border-radius:8px; color:#fff}
|
||||||
|
.menu-row svg.ico{width:21px; height:21px; flex:none}
|
||||||
|
.menu-row svg,.menu-util svg{stroke-width:1.7}
|
||||||
|
.menu-row .chev{margin-left:auto; width:16px; height:16px; transition:transform .22s}
|
||||||
|
.menu-item.is-expanded .menu-row .chev{transform:rotate(180deg)}
|
||||||
|
.menu-item.is-active > .menu-row{background:rgba(255,255,255,.16)}
|
||||||
|
.submenu{display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease}
|
||||||
|
.menu-item.is-expanded .submenu{grid-template-rows:1fr}
|
||||||
|
.submenu > div{overflow:hidden}
|
||||||
|
.submenu a{display:block; padding:10px 12px 10px 47px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.82)}
|
||||||
|
.submenu a:hover{color:#fff}
|
||||||
|
.menu-divider{height:1px; background:rgba(255,255,255,.2); margin:14px 6px 12px}
|
||||||
|
.menu-util a{display:flex; align-items:center; gap:14px; padding:12px; font-weight:600; font-size:15px; border-radius:8px; color:#fff}
|
||||||
|
.menu-util a svg{width:19px; height:19px}
|
||||||
|
.menu-foot{padding-top:6px}
|
||||||
|
.menu-scene{margin-inline:-20px; margin-bottom:2px; pointer-events:none}
|
||||||
|
.menu-scene svg{display:block; width:100%; height:auto}
|
||||||
|
.menu-foot .claim{font-size:16px; font-weight:600; line-height:1.38; margin-bottom:18px; padding-inline:6px; letter-spacing:-.005em}
|
||||||
|
.menu-rule{height:1px; background:rgba(255,255,255,.16); margin:0 6px 18px; width:86%}
|
||||||
|
.menu-social{display:flex; gap:17px; padding-inline:6px}
|
||||||
|
.menu-social a{width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:#fff}
|
||||||
|
.menu-social svg{width:32px; height:32px}
|
||||||
|
@media (min-width:1081px){ .menu-panel,.menu-scrim{display:none} }
|
||||||
|
|
||||||
|
/* ============ SHARED BITS ============ */
|
||||||
|
main{display:block; padding-block:22px 40px}
|
||||||
|
@media (max-width:720px){ main{padding-block:14px 16px} }
|
||||||
|
.card{background:var(--card); border:1px solid var(--line); border-radius:12px}
|
||||||
|
.pill{display:inline-flex; align-items:center; background:var(--red); color:#fff; font-size:10.5px; font-weight:800;
|
||||||
|
letter-spacing:.045em; text-transform:uppercase; padding:5px 10px; border-radius:4px; line-height:1}
|
||||||
|
.cat{font-size:10.5px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; color:var(--red)}
|
||||||
|
.meta{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); font-weight:400}
|
||||||
|
.meta svg{width:14px; height:14px; flex:none; color:var(--ink-faint)}
|
||||||
|
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
|
||||||
|
.sec-title{display:flex; align-items:center; gap:11px; font-size:19px; font-weight:800; color:var(--ink); white-space:nowrap}
|
||||||
|
.sec-title svg{width:22px; height:22px; color:var(--red); flex:none}
|
||||||
|
.sec-title.upper{font-size:17px; color:var(--red); text-transform:uppercase; letter-spacing:.05em}
|
||||||
|
.more{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--red); white-space:nowrap}
|
||||||
|
.more svg{width:14px; height:14px}
|
||||||
|
.more:hover{color:var(--red-hover)}
|
||||||
|
.ratio{position:relative; overflow:hidden; background:var(--soft)}
|
||||||
|
.ratio img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
|
||||||
|
|
||||||
|
/* ============ HOME: top row ============ */
|
||||||
|
.top-row{display:grid; grid-template-columns:1.82fr 1fr; gap:20px; align-items:stretch}
|
||||||
|
@media (max-width:980px){ .top-row{grid-template-columns:1fr; align-items:start} }
|
||||||
|
#heroWrap{position:relative; min-width:0}
|
||||||
|
|
||||||
|
.hero{position:relative; border-radius:12px; overflow:hidden; display:block; box-shadow:var(--shadow)}
|
||||||
|
.hero .pic{position:relative; padding-top:56.25%}
|
||||||
|
@media (max-width:720px){ .hero .pic{padding-top:72%} }
|
||||||
|
/* Desktop: Bild genau so hoch wie die Einsatzliste daneben */
|
||||||
|
@media (min-width:981px){
|
||||||
|
#heroWrap{height:100%}
|
||||||
|
.hero{height:100%}
|
||||||
|
.hero .pic{padding-top:0; height:100%; min-height:320px}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bildergalerie auf Einsatz-Detailseiten */
|
||||||
|
.gallery{position:relative}
|
||||||
|
.gallery .detail-hero{margin-bottom:10px}
|
||||||
|
.gallery .hero-nav{top:50%}
|
||||||
|
.gal-count{position:absolute; right:14px; bottom:24px; z-index:3; background:rgba(12,8,10,.6); color:#fff;
|
||||||
|
font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; font-variant-numeric:tabular-nums}
|
||||||
|
.gal-thumbs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
|
||||||
|
.gal-thumb{width:98px; height:64px; border-radius:8px; overflow:hidden; padding:0; border:2px solid transparent;
|
||||||
|
opacity:.6; transition:opacity .15s ease, border-color .15s ease}
|
||||||
|
.gal-thumb img{width:100%; height:100%; object-fit:cover; display:block}
|
||||||
|
.gal-thumb:hover{opacity:1}
|
||||||
|
.gal-thumb.is-active{opacity:1; border-color:var(--red)}
|
||||||
|
@media (max-width:480px){ .gal-thumb{width:76px; height:52px} }
|
||||||
|
|
||||||
|
/* Slider-Steuerung */
|
||||||
|
/* sitzen im Bildbereich oberhalb der Textzone */
|
||||||
|
.hero-nav{position:absolute; top:34%; transform:translateY(-50%); z-index:3; width:38px; height:38px;
|
||||||
|
border-radius:50%; background:rgba(12,8,10,.5); color:#fff; display:flex; align-items:center; justify-content:center;
|
||||||
|
transition:background .18s ease}
|
||||||
|
.hero-nav:hover{background:rgba(12,8,10,.72)}
|
||||||
|
.hero-nav svg{width:19px; height:19px}
|
||||||
|
.hero-nav.prev{left:12px}
|
||||||
|
.hero-nav.next{right:12px}
|
||||||
|
@media (max-width:720px){ .hero-nav{top:26%} }
|
||||||
|
@media (min-width:981px){ .hero-nav{width:42px; height:42px} .hero-nav.prev{left:16px} .hero-nav.next{right:16px} }
|
||||||
|
.hero .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
|
||||||
|
.hero .veil{position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,12,18,.93) 4%,rgba(9,12,18,.62) 38%,rgba(9,12,18,.05) 68%)}
|
||||||
|
.hero .body{position:absolute; left:0; right:0; bottom:0; padding:26px 28px 38px; color:#fff}
|
||||||
|
@media (max-width:720px){ .hero .body{padding:18px 18px 34px} }
|
||||||
|
.hero h2{font-size:30px; font-weight:800; line-height:1.14; margin:13px 0 12px; max-width:20ch; color:#fff}
|
||||||
|
@media (max-width:980px){ .hero h2{font-size:24px} }
|
||||||
|
@media (max-width:420px){ .hero h2{font-size:21px} }
|
||||||
|
.hero .desc{font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.86); max-width:56ch; margin-bottom:14px}
|
||||||
|
@media (max-width:980px){ .hero .desc{display:none} }
|
||||||
|
.hero .meta{color:rgba(255,255,255,.88)}
|
||||||
|
.hero .meta svg{color:rgba(255,255,255,.8)}
|
||||||
|
.dots{position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:center; gap:2px; z-index:3}
|
||||||
|
.dots button{width:22px; height:22px; display:flex; align-items:center; justify-content:center}
|
||||||
|
.dots button::before{content:""; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); transition:all .18s ease}
|
||||||
|
.dots button.is-active::before{background:#fff; width:9px; height:9px}
|
||||||
|
|
||||||
|
/* Einsatz-Liste */
|
||||||
|
.einsatz-card{padding:18px 20px 6px}
|
||||||
|
.einsatz-card .sec-head{margin-bottom:0; padding-bottom:14px; border-bottom:1px solid var(--line)}
|
||||||
|
.ev{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
|
||||||
|
.ev:last-child{border-bottom:0}
|
||||||
|
.ev .txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
|
||||||
|
.ev .l1{display:flex; align-items:center; gap:13px; flex-wrap:wrap}
|
||||||
|
.ev .time{font-size:14px; color:var(--ink-soft)}
|
||||||
|
.photo-badge{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; line-height:1;
|
||||||
|
color:var(--ink-faint); margin-left:-6px}
|
||||||
|
.photo-badge svg{width:14px; height:14px}
|
||||||
|
.ev .ttl{font-size:17px; font-weight:700; line-height:1.3}
|
||||||
|
.ev .chev{width:20px; height:20px; color:var(--red); flex:none}
|
||||||
|
.sec-title .mob{display:none}
|
||||||
|
@media (max-width:720px){
|
||||||
|
.einsatz-card{background:none; border:0; padding:0}
|
||||||
|
.einsatz-card .sec-head{border-bottom:0; padding-bottom:0; margin-bottom:12px}
|
||||||
|
.sec-title .desk{display:none}
|
||||||
|
.sec-title .mob{display:inline}
|
||||||
|
.sec-title.upper{font-size:19px; color:var(--ink); text-transform:none; letter-spacing:-.015em}
|
||||||
|
.ev-list{display:flex; flex-direction:column; gap:12px}
|
||||||
|
.ev{background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 16px}
|
||||||
|
.ev .ttl{font-size:16px}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ HOME: three columns ============ */
|
||||||
|
.cols{display:grid; grid-template-columns:1.33fr 1.33fr 1.07fr; gap:20px; align-items:start; margin-top:22px}
|
||||||
|
@media (max-width:1080px){ .cols{grid-template-columns:1fr 1fr} .col-3{grid-column:span 2} }
|
||||||
|
@media (max-width:760px){ .cols{grid-template-columns:1fr} .col-3{grid-column:auto} }
|
||||||
|
.panel{padding:18px 20px}
|
||||||
|
|
||||||
|
.feature .shot{border-radius:8px; padding-top:52%; margin-bottom:14px}
|
||||||
|
.feature .pill{margin-bottom:10px}
|
||||||
|
.feature h3{font-size:19px; font-weight:700; margin-bottom:9px}
|
||||||
|
.feature .exc{font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:11px}
|
||||||
|
.mini-list{margin-top:16px; border-top:1px solid var(--line)}
|
||||||
|
.mini{display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line)}
|
||||||
|
.mini:last-child{border-bottom:0; padding-bottom:2px}
|
||||||
|
.mini .shot{width:86px; height:62px; border-radius:6px; flex:none}
|
||||||
|
.mini .ttl{font-size:14px; font-weight:500; line-height:1.4; margin:5px 0 6px}
|
||||||
|
.mini .meta{font-size:11.5px}
|
||||||
|
.mini .meta svg{width:12px; height:12px}
|
||||||
|
|
||||||
|
.wm{display:flex; gap:15px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line)}
|
||||||
|
.wm:first-of-type{padding-top:2px}
|
||||||
|
.wm:last-child{border-bottom:0; padding-bottom:2px}
|
||||||
|
.wm .shot{width:104px; height:78px; border-radius:8px; flex:none}
|
||||||
|
.wm .ttl{font-size:15px; font-weight:500; line-height:1.42; margin:6px 0 8px}
|
||||||
|
.wm .meta{font-size:12.5px}
|
||||||
|
|
||||||
|
.tm{display:flex; gap:16px; align-items:stretch; padding:14px 0; border-bottom:1px solid var(--line)}
|
||||||
|
.tm:first-of-type{padding-top:2px}
|
||||||
|
.tm:last-child{border-bottom:0; padding-bottom:2px}
|
||||||
|
.tm .dt{width:42px; flex:none; text-align:center; color:var(--red); line-height:1}
|
||||||
|
.tm .dt .d{font-size:25px; font-weight:800; letter-spacing:-.02em}
|
||||||
|
.tm .dt .m{font-size:11px; font-weight:800; letter-spacing:.06em; margin-top:3px}
|
||||||
|
.tm .rule{width:1px; background:var(--line); flex:none}
|
||||||
|
.tm .ttl{font-size:14.5px; font-weight:700; margin-bottom:5px; line-height:1.35}
|
||||||
|
.tm .sub{font-size:13px; color:var(--ink-soft); line-height:1.5}
|
||||||
|
|
||||||
|
.mapcard{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:20px; position:relative; overflow:hidden}
|
||||||
|
.mapcard .bg{position:absolute; right:-20px; top:0; bottom:0; width:56%; opacity:.55; color:#c9ccd4}
|
||||||
|
.mapcard .inner{position:relative}
|
||||||
|
.mapcard .txt{font-size:13.5px; color:var(--ink-soft); margin:8px 0 15px; max-width:22ch}
|
||||||
|
.btn-red{display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; font-weight:700; font-size:14px; padding:12px 18px; border-radius:8px}
|
||||||
|
.btn-red:hover{background:var(--red-hover)}
|
||||||
|
.btn-red svg{width:14px; height:14px}
|
||||||
|
|
||||||
|
/* ============ SUBPAGES ============ */
|
||||||
|
.pagehead{margin-bottom:22px}
|
||||||
|
.crumbs{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-faint); font-weight:500; margin-bottom:10px}
|
||||||
|
.crumbs svg{width:11px; height:11px}
|
||||||
|
.crumbs a:hover{color:var(--red)}
|
||||||
|
.pagehead h1{font-size:32px; font-weight:800}
|
||||||
|
@media (max-width:720px){ .pagehead h1{font-size:25px} }
|
||||||
|
.pagehead .lead{color:var(--ink-soft); font-size:15.5px; line-height:1.6; max-width:68ch; margin-top:10px}
|
||||||
|
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
|
||||||
|
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
|
||||||
|
@media (max-width:900px){ .grid3{grid-template-columns:repeat(2,1fr)} }
|
||||||
|
@media (max-width:640px){ .grid2,.grid3{grid-template-columns:1fr} }
|
||||||
|
.newscard{display:block; overflow:hidden}
|
||||||
|
.newscard .shot{padding-top:56%}
|
||||||
|
.newscard .body{padding:16px 17px 18px}
|
||||||
|
.newscard .pill{margin-bottom:10px}
|
||||||
|
.newscard h3{font-size:17px; font-weight:700; margin-bottom:8px; line-height:1.35}
|
||||||
|
.newscard .exc{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:10px}
|
||||||
|
|
||||||
|
.detail-hero{border-radius:12px; overflow:hidden; padding-top:42%; margin-bottom:22px; box-shadow:var(--shadow)}
|
||||||
|
@media (max-width:720px){ .detail-hero{padding-top:62%} }
|
||||||
|
.split{display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start}
|
||||||
|
@media (max-width:900px){ .split{grid-template-columns:1fr} }
|
||||||
|
.prose{font-size:16px; line-height:1.75; color:var(--ink-soft); max-width:72ch}
|
||||||
|
.prose p{margin-bottom:15px}
|
||||||
|
.prose p.note{font-size:13.5px; color:var(--ink-faint)}
|
||||||
|
.back{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:16px}
|
||||||
|
.back svg{width:15px; height:15px}
|
||||||
|
.back:hover{color:var(--red)}
|
||||||
|
.info{padding:20px}
|
||||||
|
.info h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:14px; font-weight:800}
|
||||||
|
.info .row{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; margin-bottom:13px}
|
||||||
|
.info .row:last-child{margin-bottom:0}
|
||||||
|
.info .row svg{width:17px; height:17px; color:var(--red); flex:none; margin-top:2px}
|
||||||
|
.units{display:flex; flex-direction:column}
|
||||||
|
.unit{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:13px 0; border-bottom:1px solid var(--line)}
|
||||||
|
.unit:last-child{border-bottom:0}
|
||||||
|
.unit .nm{font-size:14.5px; font-weight:700}
|
||||||
|
/* Links in Einsatzangaben: unauffaellig schwarz, erst bei Mouseover rot */
|
||||||
|
a.nm,a.lnk{color:inherit; border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s}
|
||||||
|
a.nm:hover,a.lnk:hover{color:var(--red); border-bottom-color:var(--red)}
|
||||||
|
.lnk{font-weight:600}
|
||||||
|
.unit .fz{display:flex; gap:6px; flex-wrap:wrap}
|
||||||
|
.unit .fz span{font-size:11.5px; font-weight:700; color:var(--ink-soft); background:var(--soft);
|
||||||
|
border:1px solid var(--line); padding:3px 9px; border-radius:5px; letter-spacing:.02em}
|
||||||
|
/* ---- einheitliches Geruest aller Detailseiten ---- */
|
||||||
|
.detail-head{margin:20px 0 20px}
|
||||||
|
.eyebrow{display:block; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
|
||||||
|
color:var(--red); margin-bottom:9px}
|
||||||
|
.detail-head h1{font-size:34px; font-weight:800; line-height:1.15}
|
||||||
|
@media (max-width:720px){ .detail-head h1{font-size:26px} }
|
||||||
|
.detail-head .lead{margin-top:12px; font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:66ch}
|
||||||
|
|
||||||
|
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:14px; margin-bottom:20px}
|
||||||
|
.fact{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
|
||||||
|
.fact .k{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.05em;
|
||||||
|
text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px}
|
||||||
|
.fact .k svg{width:14px; height:14px; color:var(--red); flex:none}
|
||||||
|
.fact .v{font-size:16.5px; font-weight:700; line-height:1.3}
|
||||||
|
|
||||||
|
.block{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:18px}
|
||||||
|
@media (max-width:560px){ .block{padding:17px 16px} }
|
||||||
|
.block > h2{display:flex; align-items:center; gap:12px; font-size:17px; font-weight:800; margin-bottom:16px}
|
||||||
|
.block > h2 .ic{width:32px; height:32px; border-radius:9px; background:#fdf0f2; color:var(--red);
|
||||||
|
display:flex; align-items:center; justify-content:center; flex:none}
|
||||||
|
.block > h2 .ic svg{width:18px; height:18px}
|
||||||
|
.block .prose{font-size:15.5px}
|
||||||
|
.block .prose p:last-child{margin-bottom:0}
|
||||||
|
|
||||||
|
.side{display:flex; flex-direction:column; gap:16px}
|
||||||
|
@media (min-width:901px){ .side{position:sticky; top:110px} }
|
||||||
|
/* Kompakte Liste in der Seitenspalte (z. B. letzte Einsätze) */
|
||||||
|
.side-items{display:flex; flex-direction:column}
|
||||||
|
.side-item{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line)}
|
||||||
|
.side-item:first-child{padding-top:0}
|
||||||
|
.side-item:last-child{border-bottom:0; padding-bottom:0}
|
||||||
|
.side-item .shot{width:62px; height:46px; border-radius:7px; flex:none; overflow:hidden}
|
||||||
|
.side-item .cat{display:block; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
|
||||||
|
color:var(--red); margin-bottom:3px}
|
||||||
|
.side-item .ttl{display:block; font-size:13px; font-weight:600; line-height:1.35; transition:color .15s}
|
||||||
|
.side-item .dt{display:block; font-size:11.5px; color:var(--ink-faint); margin-top:4px}
|
||||||
|
.side-item:hover .ttl{color:var(--red)}
|
||||||
|
.side-more{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--red); margin-top:14px}
|
||||||
|
.side-more svg{width:13px; height:13px}
|
||||||
|
|
||||||
|
.side .people{grid-template-columns:1fr; gap:10px}
|
||||||
|
.side .person{padding:13px 14px}
|
||||||
|
.side .person .ava{width:42px; height:42px; font-size:14px}
|
||||||
|
|
||||||
|
/* Detailseiten Ortsfeuerwehr / Jugendfeuerwehr */
|
||||||
|
/* Fahrzeug-Kacheln */
|
||||||
|
.vehicles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
|
||||||
|
@media (max-width:980px){ .vehicles{grid-template-columns:repeat(2,1fr)} }
|
||||||
|
@media (max-width:560px){ .vehicles{grid-template-columns:1fr} }
|
||||||
|
.veh{border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--card)}
|
||||||
|
.veh .ratio{padding-top:58%}
|
||||||
|
.veh .body{padding:12px 13px 14px}
|
||||||
|
.veh .k{display:block; font-size:15.5px; font-weight:800; letter-spacing:.01em}
|
||||||
|
.veh .t{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.4; margin-top:3px}
|
||||||
|
.veh .sub{display:block; font-size:11.5px; color:var(--ink-faint); line-height:1.45; margin-top:7px}
|
||||||
|
|
||||||
|
/* Hervorgehobene Kinderfeuerwehr-Karte */
|
||||||
|
.feature-card{display:grid; grid-template-columns:280px 1fr; gap:0; overflow:hidden; margin-bottom:20px}
|
||||||
|
@media (max-width:720px){ .feature-card{grid-template-columns:1fr} }
|
||||||
|
.feature-card .ratio{padding-top:100%}
|
||||||
|
@media (max-width:720px){ .feature-card .ratio{padding-top:52%} }
|
||||||
|
.feature-card .body{padding:22px 24px}
|
||||||
|
@media (max-width:560px){ .feature-card .body{padding:18px 16px} }
|
||||||
|
.feature-card h3{font-size:21px; font-weight:800; margin:8px 0 10px}
|
||||||
|
.feature-card .txt{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:14px}
|
||||||
|
|
||||||
|
.chips{display:flex; flex-wrap:wrap; gap:8px}
|
||||||
|
.chips a{color:var(--ink-soft); text-decoration:none}
|
||||||
|
.chips a:hover{border-color:var(--red); color:var(--red)}
|
||||||
|
.chips span,.chips a{display:inline-block; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--card);
|
||||||
|
border:1px solid var(--line); padding:7px 13px; border-radius:999px; transition:border-color .15s, color .15s}
|
||||||
|
.ticks{display:flex; flex-direction:column; gap:9px}
|
||||||
|
.ticks.two{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px}
|
||||||
|
@media (max-width:700px){ .ticks.two{grid-template-columns:1fr} }
|
||||||
|
.ticks li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); line-height:1.5}
|
||||||
|
.ticks svg{width:16px; height:16px; color:var(--red); flex:none; margin-top:2px}
|
||||||
|
.people{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
|
||||||
|
@media (max-width:640px){ .people{grid-template-columns:1fr} }
|
||||||
|
.person{display:flex; align-items:center; gap:14px; padding:14px 16px}
|
||||||
|
.person .ava{width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
|
||||||
|
background:linear-gradient(160deg,#c8102e,#8c0d1e); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em}
|
||||||
|
.person .nm{display:block; font-size:15px; font-weight:700; line-height:1.3}
|
||||||
|
.person .role{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px}
|
||||||
|
.person .mail{display:block; font-size:12px; color:var(--red); margin-top:4px; overflow-wrap:anywhere}
|
||||||
|
.pullquote{font-size:19px; font-weight:800; color:var(--red); line-height:1.35; margin:22px 0 0; max-width:34ch}
|
||||||
|
.sub-sec{margin-top:26px}
|
||||||
|
.sub-sec > .sec-title{margin-bottom:13px}
|
||||||
|
|
||||||
|
/* Autorenbereich unter dem Artikel */
|
||||||
|
.author{display:flex; align-items:center; gap:16px; margin-top:26px; padding:16px 18px;
|
||||||
|
background:var(--card); border:1px solid var(--line); border-radius:12px}
|
||||||
|
.author .ava{width:58px; height:58px; border-radius:50%; flex:none; overflow:hidden; display:flex;
|
||||||
|
align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px;
|
||||||
|
background:linear-gradient(160deg,#c8102e,#8c0d1e)}
|
||||||
|
.author .ava img{width:100%; height:100%; object-fit:cover}
|
||||||
|
.author .ava svg{width:27px; height:27px}
|
||||||
|
.author .lbl{display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
|
||||||
|
color:var(--ink-faint); margin-bottom:5px}
|
||||||
|
.author .nm{display:block; font-size:16px; font-weight:700; line-height:1.3}
|
||||||
|
.author .role{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); margin-top:3px}
|
||||||
|
.author .role svg{width:13px; height:13px; color:var(--ink-faint)}
|
||||||
|
@media (max-width:480px){ .author{gap:13px; padding:14px 15px} .author .ava{width:48px; height:48px} }
|
||||||
|
|
||||||
|
.hint{display:flex; gap:11px; padding:13px 15px; background:#fdf0f2; color:#9a1228; border-radius:9px; font-size:13px; line-height:1.5; margin-bottom:20px}
|
||||||
|
.hint svg{width:17px; height:17px; flex:none; margin-top:1px}
|
||||||
|
.station{display:block; overflow:hidden}
|
||||||
|
.station .shot{padding-top:56%}
|
||||||
|
.station .body{padding:15px 16px 17px}
|
||||||
|
.station h3{font-size:16px; font-weight:700; margin-bottom:6px}
|
||||||
|
.station .desc{font-size:13px; color:var(--ink-soft); line-height:1.5}
|
||||||
|
|
||||||
|
.form{display:flex; flex-direction:column; gap:15px}
|
||||||
|
.field{display:flex; flex-direction:column; gap:7px}
|
||||||
|
.field label{font-size:12.5px; font-weight:700; color:var(--ink-soft)}
|
||||||
|
.field input,.field textarea{border:1px solid var(--line); background:#fff; border-radius:8px; padding:12px 14px; font:inherit; font-size:14.5px; color:var(--ink)}
|
||||||
|
.field textarea{resize:vertical; min-height:110px}
|
||||||
|
.row2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
|
||||||
|
@media (max-width:560px){ .row2{grid-template-columns:1fr} }
|
||||||
|
.ok{display:none; align-items:center; gap:10px; padding:13px 15px; background:#e9f8ee; color:#1d7a3d; border-radius:9px; font-weight:600; font-size:13.5px}
|
||||||
|
.ok.is-on{display:flex}
|
||||||
|
.ok svg{width:17px; height:17px}
|
||||||
|
.searchbox{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 16px; margin-bottom:22px}
|
||||||
|
.searchbox svg{width:19px; height:19px; color:var(--ink-faint); flex:none}
|
||||||
|
.searchbox input{flex:1; border:0; background:none; font:inherit; font-size:15.5px; color:var(--ink)}
|
||||||
|
.searchbox input:focus{outline:none}
|
||||||
|
.empty{padding:44px 20px; text-align:center; color:var(--ink-faint); font-size:14.5px}
|
||||||
|
.mapdemo{border-radius:12px; overflow:hidden; padding-top:48%; margin-bottom:18px; box-shadow:var(--shadow); background:var(--soft)}
|
||||||
|
@media (max-width:720px){ .mapdemo{padding-top:80%} }
|
||||||
|
.legend{display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); font-weight:500}
|
||||||
|
.legend .dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px}
|
||||||
|
|
||||||
|
/* ============ FOOTER ============ */
|
||||||
|
footer.site{background:var(--red-bar); color:#fff; margin-top:40px}
|
||||||
|
.footgrid{display:grid; grid-template-columns:1.1fr 1.15fr 1fr 1fr; padding-block:16px 12px}
|
||||||
|
.footcol{padding-inline:30px}
|
||||||
|
.footcol:first-child{padding-left:0}
|
||||||
|
.footcol + .footcol{border-left:1px solid rgba(255,255,255,.2)}
|
||||||
|
/* Schmale Viewports: Logo + Kontakt links, Schnellzugriff rechts, Social als eigene Zeile */
|
||||||
|
@media (max-width:760px){
|
||||||
|
.footgrid{grid-template-columns:1fr 1fr; column-gap:16px; row-gap:18px}
|
||||||
|
.footcol{padding-inline:0}
|
||||||
|
.footcol + .footcol{border-left:0}
|
||||||
|
.footcol:nth-child(1){grid-column:1; grid-row:1}
|
||||||
|
.footcol:nth-child(2){grid-column:1; grid-row:2}
|
||||||
|
.footcol:nth-child(3){grid-column:2; grid-row:1 / span 2; padding-left:16px; border-left:1px solid rgba(255,255,255,.2)}
|
||||||
|
.footcol:nth-child(4){grid-column:1 / -1; grid-row:3; display:flex; align-items:center; justify-content:space-between;
|
||||||
|
gap:14px; padding-top:15px; border-top:1px solid rgba(255,255,255,.2)}
|
||||||
|
.footcol:nth-child(4) h5{margin:0}
|
||||||
|
.footbottom{flex-direction:column; align-items:center; text-align:center; gap:7px}
|
||||||
|
}
|
||||||
|
.footcol h5{font-size:12.5px; font-weight:800; margin:0 0 8px; line-height:1.2}
|
||||||
|
.footlist{display:flex; flex-direction:column; gap:5px}
|
||||||
|
.footlist a,.footlist .row{font-size:12px; color:rgba(255,255,255,.88); display:flex; gap:10px; align-items:flex-start; line-height:1.3}
|
||||||
|
.footlist a:hover{color:#fff}
|
||||||
|
.footlist svg{width:15px; height:15px; flex:none; margin-top:1px}
|
||||||
|
.footsocial{display:flex; gap:11px}
|
||||||
|
.footsocial a{width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:#fff}
|
||||||
|
.footsocial svg{width:27px; height:27px}
|
||||||
|
.footbottom{border-top:1px solid rgba(255,255,255,.2); padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));
|
||||||
|
display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:11.5px; color:rgba(255,255,255,.8)}
|
||||||
|
.footbottom .left{display:flex; gap:14px; align-items:center}
|
||||||
|
.footbottom .sep{opacity:.5}
|
||||||
|
.footbottom a{text-decoration:underline; text-underline-offset:2px}
|
||||||
|
@media (max-width:720px){ .footbottom{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))} }
|
||||||
Reference in new issue
Block a user