/* ========================================================================== Ilch Layout - Angelverein Design (passend zur Landingpage) ========================================================================== */ /* -------------------------------------------------------------------------- CSS Custom Properties (identisch zur Landingpage) -------------------------------------------------------------------------- */ :root { /* Primärfarben - Stahlblau (vom Wappen) */ --color-primary: #4A6B8A; --color-primary-dark: #3A5570; --color-primary-light: #5D7F9E; /* Sekundärfarben - Gold/Ocker (vom Wappen) */ --color-secondary: #D4A854; --color-secondary-dark: #B8923F; --color-secondary-light: #E2BC6E; /* Neutrale Farben */ --color-white: #ffffff; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; /* Semantische Farben */ --color-text: var(--color-gray-800); --color-text-light: var(--color-gray-600); --color-background: var(--color-white); --color-background-alt: var(--color-gray-50); --color-border: var(--color-gray-200); /* Typografie */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Schatten */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; } /* -------------------------------------------------------------------------- Base Styles -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-family); font-size: 1rem; line-height: 1.6; color: var(--color-text); background-color: var(--color-background-alt); margin: 0; padding: 0; } img { max-width: 100%; height: auto; } a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-primary-dark); text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--color-gray-900); font-weight: 600; line-height: 1.3; } h1 { font-size: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-primary); } /* -------------------------------------------------------------------------- Header / Navigation -------------------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 1000; background: var(--color-white); box-shadow: var(--shadow-md); } .nav-main { width: 100%; } .nav-container { max-width: 100%; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 70px; } .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav-logo-img { height: 45px; width: auto; margin-left:20px ; } .nav-logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); } /* Header Menu Wrapper */ .nav-menu-wrapper { display: flex; align-items: center; gap: 1rem; } .nav-menu-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .nav-menu-list li { margin: 0; } .nav-menu-list a { display: block; padding: 0.5rem 1rem; color: var(--color-gray-700); font-weight: 500; border-radius: var(--radius-md); transition: all 0.2s ease; text-decoration: none; } .nav-menu-list a:hover { color: var(--color-primary); background: var(--color-gray-100); } .nav-menu { display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .nav-item { margin: 0; } .nav-link { display: block; padding: 0.5rem 1rem; color: var(--color-gray-700); font-weight: 500; border-radius: var(--radius-md); transition: all 0.2s ease; } .nav-link:hover { color: var(--color-primary); background: var(--color-gray-100); } .nav-link-cta { background: var(--color-primary); color: var(--color-white) !important; } .nav-link-cta:hover { background: var(--color-primary-dark); color: var(--color-white) !important; } /* Mobile Navigation */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .nav-toggle-line { width: 25px; height: 3px; background: var(--color-gray-700); border-radius: 2px; transition: all 0.3s ease; } @media (max-width: 991px) { .nav-toggle { display: flex; } .nav-menu-wrapper { position: fixed; top: 70px; left: 0; right: 0; background: var(--color-white); flex-direction: column; padding: 1rem; gap: 0; box-shadow: var(--shadow-lg); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; } .nav-menu-active { transform: translateY(0); opacity: 1; visibility: visible; } .nav-menu-list { flex-direction: column; width: 100%; gap: 0; } .nav-menu-list li { width: 100%; } .nav-menu-list a { padding: 1rem; border-bottom: 1px solid var(--color-gray-200); border-radius: 0; } .nav-menu-wrapper > .nav-link-cta { width: 100%; text-align: center; margin-top: 0.5rem; padding: 1rem; } .nav-menu { position: fixed; top: 70px; left: 0; right: 0; background: var(--color-white); flex-direction: column; padding: 1rem; gap: 0; box-shadow: var(--shadow-lg); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; } .nav-item { width: 100%; } .nav-link { padding: 1rem; border-bottom: 1px solid var(--color-gray-200); } .nav-toggle-active .nav-toggle-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle-active .nav-toggle-line:nth-child(2) { opacity: 0; } .nav-toggle-active .nav-toggle-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } } /* -------------------------------------------------------------------------- Main Content Area -------------------------------------------------------------------------- */ .main-content { min-height: calc(100vh - 70px - 200px); padding: 2rem 0; } .content-wrapper { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 2rem; } /* Sidebar */ .sidebar { position: sticky; top: 90px; } .sidebar-card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; overflow: hidden; } .sidebar-card-header { background: var(--color-primary); color: var(--color-white); padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .sidebar-card-body { padding: 0; } .sidebar-card-body ul { list-style: none; margin: 0; padding: 0; } .sidebar-card-body li { border-bottom: 1px solid var(--color-gray-100); } .sidebar-card-body li:last-child { border-bottom: none; } .sidebar-card-body a { display: block; padding: 0.75rem 1rem; color: var(--color-gray-700); transition: all 0.2s ease; } .sidebar-card-body a:hover { background: var(--color-gray-50); color: var(--color-primary); padding-left: 1.25rem; } /* Content Card */ .content-card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .content-card-body { padding: 1.5rem; } /* Breadcrumb */ .breadcrumb { background: var(--color-gray-100); padding: 0.75rem 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.875rem; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { background: var(--color-gray-900); color: var(--color-gray-300); padding: 3rem 0 1.5rem; margin-top: 2rem; } .footer-container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 2rem; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-gray-700); } @media (max-width: 767px) { .footer-content { grid-template-columns: 1fr; gap: 2rem; } } .footer-brand { display: flex; flex-direction: column; gap: 0.75rem; } .footer-logo { height: 150px; width: auto; object-fit: contain; max-width: 200px; } .footer-tagline { color: var(--color-gray-400); font-size: 0.9rem; } .footer-heading { color: var(--color-white); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: var(--color-gray-400); transition: color 0.2s ease; } .footer-links a:hover { color: var(--color-white); } .footer-bottom { padding-top: 1.5rem; text-align: center; } .footer-copyright { font-size: 0.875rem; color: var(--color-gray-500); } /* -------------------------------------------------------------------------- Bootstrap Overrides -------------------------------------------------------------------------- */ .btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-primary:hover { background-color: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; } .btn-secondary { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: var(--color-gray-900) !important; } .btn-secondary:hover { background-color: var(--color-secondary-dark) !important; border-color: var(--color-secondary-dark) !important; } .card { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-header { background: var(--color-primary); color: var(--color-white); font-weight: 600; border-bottom: none; } .table { margin-bottom: 0; } .table thead th { background: var(--color-gray-100); border-bottom: 2px solid var(--color-primary); color: var(--color-gray-700); font-weight: 600; } /* -------------------------------------------------------------------------- Ilch Module Overrides -------------------------------------------------------------------------- */ .ilch-head { background-color: var(--color-primary) !important; color: var(--color-white) !important; } .ilch-head a { color: var(--color-white) !important; } /* Form Styling */ .form-control, .form-select { border-radius: var(--radius-md); border-color: var(--color-gray-300); padding: 0.625rem 1rem; } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(74, 107, 138, 0.1); } /* Alert Styling */ .alert { border-radius: var(--radius-md); border: none; } /* Pagination */ .pagination .page-link { color: var(--color-primary); border-radius: var(--radius-sm); margin: 0 2px; } .pagination .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); } /* -------------------------------------------------------------------------- Hero Section -------------------------------------------------------------------------- */ .hero { position: relative; height: 60vh; min-height: 400px; max-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; background-image: url('img/hero.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.8) 100% ); } .hero-content { position: relative; z-index: 10; max-width: 800px; padding: 2rem; } .hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--color-white); margin-bottom: 1rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); border: none; padding: 0; } .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.5rem); color: var(--color-gray-200); margin-bottom: 2rem; font-weight: 400; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-hero { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: all 0.3s ease; min-width: 160px; } .btn-hero-primary { background: var(--color-primary); color: var(--color-white); border: 2px solid var(--color-primary); } .btn-hero-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 107, 138, 0.4); } .btn-hero-secondary { background: transparent; color: var(--color-white); border: 2px solid var(--color-white); } .btn-hero-secondary:hover { background: var(--color-white); color: var(--color-gray-900); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2); } /* Hero Scroll Indicator */ .hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; } .hero-scroll-link { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: var(--color-white); transition: all 0.3s ease; animation: bounce 2s infinite; } .hero-scroll-link:hover { border-color: var(--color-white); background: rgba(255, 255, 255, 0.1); color: var(--color-white); } .hero-scroll-icon { width: 24px; height: 24px; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } @media (max-width: 767px) { .hero { height: 50vh; min-height: 350px; } .hero-buttons { flex-direction: column; align-items: center; } .btn-hero { width: 100%; max-width: 280px; } } /* Header-Zeile: feste Höhe */ .nav-menu-bar { height: 70px; display: flex; align-items: center; gap: 1rem; } /* Der Menübereich darf "engen" Content aufnehmen */ .nav-menu-box { flex: 1 1 auto; min-width: 0; } /* CTA-Box bleibt rechts */ .nav-cta-box { flex: 0 0 auto; } /* Desktop: Menü bleibt in EINER Zeile */ @media (min-width: 992px) { .nav-menu-list { display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; } /* Falls Ilch eine innere UL rendert (UL-in-UL) */ .nav-menu-list > ul { display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; } .nav-menu-list li { white-space: nowrap; } /* Wenn es zu breit wird: optional horizontal scrollen statt umbrechen */ .nav-menu-box { overflow-x: auto; } .nav-menu-box::-webkit-scrollbar { display: none; } .nav-menu-box { scrollbar-width: none; } } /* MOBILE OVERLAY: alles untereinander + Menü 2 sichtbar */ @media (max-width: 991px) { /* Wrapper ist dein Overlay */ .nav-menu-wrapper { display: none; position: fixed; top: 70px; left: 0; right: 0; background: var(--color-white); padding: 1rem; box-shadow: var(--shadow-lg); max-height: calc(100vh - 70px); overflow-y: auto; } .nav-menu-wrapper.nav-menu-active { display: block; } /* Header-Zeile im Overlay: CTA rechts, Menü 1 darunter */ .nav-menu-bar { height: auto; display: block; } /* Menü 1: EIN Punkt pro Zeile */ .nav-menu-list, .nav-menu-list > ul { display: block !important; margin: 0; padding: 0; list-style: none; } .nav-menu-list li { display: block; width: 100%; } .nav-menu-list a { display: block; width: 100%; padding: 1rem; border-bottom: 1px solid var(--color-gray-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* CTA Button im Overlay: volle Breite */ .nav-cta-box { margin-top: .75rem; } .nav-link-cta { display:block; width:100%; text-align:center; padding: 1rem; } /* Menü 2 im Overlay sichtbar machen */ .nav-menu-secondary { margin-top: 1rem; } .nav-secondary-group { margin-top: .75rem; } .nav-secondary-title { font-weight: 700; color: var(--color-gray-700); padding: .5rem 1rem; } .nav-secondary-list { margin: 0; padding: 0; list-style: none; } .nav-secondary-list li { display:block; width:100%; } .nav-secondary-list a { display:block; width:100%; padding: .9rem 1rem; border-bottom: 1px solid var(--color-gray-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Untermenüs (falls vorhanden) im Mobile: auch sauber untereinander */ .nav-menu-list ul ul, .nav-secondary-list ul { margin: 0; padding: 0; list-style: none; background: var(--color-gray-50); } .nav-menu-list ul ul a, .nav-secondary-list ul a { padding-left: 2rem; } } /* DESKTOP: Menü 2 im Header-Overlay verstecken */ @media (min-width: 992px) { .nav-menu-secondary { display: none; } } /* ========================= FOOTER LAYOUT (clean) ========================= */ /* Links Brand, rechts Menügrid */ .footer-content{ display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 4rem; align-items: start; } /* Rechts: Menü-Spalten */ .footer-menus{ display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 3rem; align-items: start; } .footer-nav{ min-width: 0; } /* Links sauber */ .footer-links{ margin: 0; padding: 0; list-style: none; } .footer-links li{ margin: .5rem 0; } .footer-links a{ display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wenn es enger wird: automatisch auf 2 Spalten rechts */ @media (max-width: 1100px){ .footer-menus{ grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 2rem; } } /* Tablet/Mobile: Brand über Menü, rechts 1 Spalte */ @media (max-width: 767px){ .footer-content{ grid-template-columns: 1fr; gap: 2rem; } .footer-menus{ grid-template-columns: 1fr; gap: 1.25rem; } } /* Footer: links Brand, rechts Menügrid */ .footer-content{ display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 4rem; align-items: start; } /* Rechts: 3 Spalten */ .footer-menus{ display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 3rem; align-items: start; } .footer-nav{ min-width: 0; } /* Links sauber */ .footer-links{ margin: 0; padding: 0; list-style: none; } .footer-links li{ margin: .5rem 0; } .footer-links a{ display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wenn es enger wird: 2 Spalten */ @media (max-width: 1100px){ .footer-menus{ grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 2rem; } } /* Mobile: alles untereinander */ @media (max-width: 767px){ .footer-content{ grid-template-columns: 1fr; gap: 2rem; } .footer-menus{ grid-template-columns: 1fr; gap: 1.25rem; } }