/* Theme Name: Sorsum Flohmarkt Theme URI: https://flohmarkt-sorsum.de/ Author: Orga-Team Sorsum Description: Garagen-Flohmarkt Theme mit nahtlosem Doodle-Pattern, Hero und Footer-Menü. Version: 1.0.0 Text Domain: sorsum-flohmarkt */ /* Basis-Reset & Typo */ :root{ --bg:#F6EED8; /* beige */ --ink:#2B2B2B; --coral:#E05A3B; --coral-dark:#C74E33; --gold:#F2C44E; --teal:#2D7C84; --footer:#333333; --radius:8px; --container:1200px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background:#fff url('assets/img/pattern-beige.png') repeat 0 0 / 800px 800px fixed; } img{max-width:100%; height:auto} a{color:var(--coral); text-decoration:none} a:hover{color:var(--coral-dark)} .container{max-width:var(--container); padding:0 24px; margin:0 auto} .btn{display:inline-block; background:var(--coral); color:#fff; padding:12px 18px; border-radius:var(--radius); font-weight:700} .btn:hover{background:var(--coral-dark)} .btn.outline{background:transparent; color:var(--coral); border:2px solid var(--coral)} /* Header/Hero */ .site-hero{position:relative; background:#ddd url('assets/img/header.jpg') center/cover no-repeat;} .site-hero::after{content:""; position:absolute; inset:0; background:rgba(246,238,216,.08);} /* leichter Beige-Overlay */ .site-hero .inner{position:relative; z-index:2; text-align:center; padding:96px 24px} .site-hero .wappen{height:110px; margin:0 auto 12px auto; display:block} .site-hero h1{margin:6px 0 6px; font-size:clamp(28px,4vw,48px); line-height:1.1} .site-hero .date{font-size:clamp(16px,2.2vw,22px); margin-bottom:16px; color:#222} .site-hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px} /* Info Section */ .section{padding:64px 0} .grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:40px} @media (max-width:900px){ .grid-2{grid-template-columns:1fr} } .card{background:rgba(255,255,255,.9); border:1px solid #eee; border-radius:12px; padding:20px} /* Tiles / Kacheln */ .tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} @media (max-width:900px){ .tiles{grid-template-columns:1fr} } .tile{background:#fff; border:1px solid #eee; border-radius:12px; padding:18px} .tile h3{margin:0 0 6px} /* Footer */ .site-footer{background:var(--footer); color:#ddd; margin-top: 0px;} .site-footer .container{display:flex; justify-content:space-between; align-items:center; padding:28px 24px} .footer-menus{display:flex; gap:40px; min-height:60px} .footer-menu-left, .footer-menu-right{flex:1; min-width:150px} .footer-menu{list-style:none; padding:0; margin:0} .footer-menu li{margin:6px 0} .footer-menu a{color:#ddd; text-decoration:none} .footer-menu a:hover{color:#fff} .footer-logo{flex-shrink:0} .footer-logo img{height:auto; width:100px; opacity:.9} .site-footer .legal{border-top:1px solid rgba(255,255,255,.12); padding:12px 24px; text-align:center; font-size:14px; color:#ccc} @media (max-width:768px) { .site-footer .container{flex-direction:column; gap:20px; text-align:center} .footer-menus{flex-direction:row; gap:20px; justify-content:center; min-height:auto} .footer-menu-left, .footer-menu-right{flex:0 1 auto; min-width:120px} .footer-logo img{height:80px; width:80px} } /* Utility */ .align-center{text-align:center} .mt-0{margin-top:0} /* White pattern variant (optional): add class .pattern-white to via Customizer) */ body.pattern-white{background:#fff url('assets/img/pattern-white.png') repeat 0 0 / 800px 800px fixed} .e-con-inner {padding-top:0px !important;} /* Navigation-Panel (Leaflet-Control) */ .leaflet-bottom .gf-nav { max-width: min(92vw, 360px); box-sizing: border-box; margin: 8px; /* Abstand zum Kartenrand */ padding: 6px 8px; background: #fff; border: 1px solid #ccc; border-radius: 6px; font: 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; } .gf-nav__title { font-weight: 600; } .gf-nav__text { margin-top: 4px; color: #333; word-break: break-word; overflow-wrap: anywhere; } .gf-nav__btn { width: 100%; margin-top: 8px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; background: #f9f9f9; cursor: pointer; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; max-width: 90%; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; max-width: 95%; padding-right: 20px; } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 35px; border: none; text-align: center; width: 24px; height: 24px; font: 16px / 24px Tahoma, Verdana, sans-serif; color: #757575; text-decoration: none; background: transparent; }