/* ========================================= gemeinderaete.css Nur für: Ziel: - 2 Bilder deutlich größer (ca. +35% gegenüber vorher) - "Heimat sozial denken" darunter mit großem Abstand (~4cm) - Mobile: Logo + "SPD-Ortsverein Aßling" ausblenden - Mobile: Sidebar/Navi unten anzeigen - Letzter Button rot + weiße Schrift + Foto rechts im Button ========================================= */ /* ---------- Titel ---------- */ .gemeinde-page .page-title{ text-align: center; margin: 0 0 16px 0; font-size: 22px; font-weight: 800; } /* ---------- Grid / Bilder (Desktop) ---------- */ .gemeinde-page .gemeinde-wrap{ background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .gemeinde-page .gemeinde-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* „waagrechter Abstand“ moderat (nicht riesig) */ column-gap: 18px; row-gap: 18px; justify-items: center; align-items: start; /* verhindert, dass es auf sehr breiten Screens endlos auseinanderzieht */ max-width: 1400px; margin: 0 auto; } .gemeinde-page .gemeinde-card-wrap{ width: 100%; /* hier stellst du effektiv die Bildgröße ein */ max-width: 500px; /* groß, aber noch realistisch in 2 Spalten */ display: flex; align-items: center; justify-content: center; } .gemeinde-page img.gemeinde-card{ width: 100%; height: auto; /* NIE verzerren */ max-width: 100%; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.12); } /* ---------- Claim/Text darunter ---------- */ /* 4 cm sind ~150px (bei 96dpi). Auf kleineren Screens automatisch weniger. */ .gemeinde-page .gemeinde-claim{ margin-top: clamp(32px, 8vw, 150px); text-align: center; font-size: 28px; font-weight: 900; color: #b71c1c; } /* ---------- Wenn Bildschirm schmaler wird: untereinander ---------- */ @media (max-width: 980px){ .gemeinde-page .gemeinde-grid{ grid-template-columns: 1fr; max-width: 760px; } .gemeinde-page .gemeinde-card-wrap{ max-width: 760px; } } /* ========================================= MOBILE/TABLET: Navigation unten anzeigen + Logo & Überschrift weg ========================================= */ @media (max-width: 900px){ /* Layout: erst Content, dann Sidebar */ .gemeinde-page .layout{ grid-template-columns: 1fr; gap: 14px; padding: 12px; } .gemeinde-page .content{ order: 1; } .gemeinde-page .sidebar{ order: 2; position: static; top: auto; margin-top: 14px; text-align: center; } /* Logo & "SPD-Ortsverein Aßling" weg */ .gemeinde-page .logo, .gemeinde-page .sidebar h3{ display: none !important; } /* Menü als große Buttons */ .gemeinde-page .menu{ gap: 10px; } .gemeinde-page .menu a{ display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; background: #eaf4ff; border: 1px solid #9bbce0; font-size: 16px; font-weight: 700; } } /* ========================================= Letzter Button auf Handy (mobile-nav): rot + weiß + Bild rechts ========================================= */ .spd-page .mobile-nav a:last-child{ background: #c62828; color: #ffffff; border-color: #eaf4ff; font-weight: 900; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 12px; } .spd-page .mobile-nav a:last-child::after{ content: ""; width: 90px; height: 90px; /* Empfohlen: Datei umbenennen auf img/Moellmann_3.png */ background-image: url("../img/Moellmann_3.png"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 50%; border: 2px solid #ffffff; flex-shrink: 0; } .spd-page .mobile-nav a:last-child:hover, .spd-page .mobile-nav a:last-child:focus-visible{ background: #b71c1c; color: #ffffff; } } /* ===== Optional: Mobile-Titel auf bestimmten Seiten ausblenden ===== (weil du "SPD-Ortsverein Aßling" am Handy dort nicht willst) */ @media (max-width: 1100px){ .spd-page.kreistag-page .mobile-title, .spd-page.gemeinde-page .mobile-title{ display: none; } }