/* ========================= SPD Startseite – Desktop/Basis Datei: css/spd-index.css (Startseite bleibt wie bei dir "perfekt") + Kreistag-Regeln am Ende (gekapselt) ========================= */ .spd-page * { box-sizing: border-box; } .spd-page{ margin: 0; font-family: Arial, sans-serif; background: #ffffff; color: #111; } .spd-page img{ max-width: 100%; height: auto; display: block; } .spd-page .layout{ display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 18px; align-items: start; min-height: 100dvh; } .spd-page .sidebar{ position: sticky; top: 12px; text-align: center; align-self: start; } .spd-page .logo{ max-width: 180px; margin: 0 auto 14px auto; } .spd-page .menu{ display: grid; gap: 10px; } .spd-page .menu1{ display: block; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #cfcfcf; text-decoration: none; font-weight: 700; } .spd-page .menu1:hover, .spd-page .menu1:focus-visible{ filter: brightness(1.03); outline: 2px solid rgba(0,0,0,0.15); outline-offset: 2px; } .spd-page .content{ width: 100%; max-width: 1400px; margin-inline: auto; /* Sicherheits-Fix gegen alte globale Regeln */ height: auto !important; overflow: visible !important; } .spd-page .hero{ background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .spd-page .hero img{ width: 100%; height: auto; /* niemals verzerren */ } /* Mobile-spezifische Elemente (werden in mobile.css aktiviert) */ .spd-page .mobile-title, .spd-page .mobile-grid{ display: none; } /* ===== Sehr große Screens (z.B. 32") ===== */ @media (min-width: 1600px){ .spd-page .layout{ grid-template-columns: 280px 1fr; gap: 32px; padding: 24px; } .spd-page .content{ max-width: 1700px; } } /* ========================================================= KREISTAG (NUR Kreistag.htm) – 4 Karten 2x2 ohne Scrollen Wirkt NUR wenn ========================================================= */ .kreistag-page .page-title{ text-align: center; margin: 0 0 12px 0; font-size: 22px; font-weight: 800; } @media (min-width: 901px){ /* 24" Abstand halbiert vs vorher: */ .kreistag-page .kreistag-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; /* <-- kleiner (vorher größer) */ row-gap: 12px; /* Damit 2x2 wirklich in den Viewport passt */ height: calc(100dvh - 170px); /* Reserve für Header/Padding */ align-content: stretch; max-width: 1200px; margin: 0 auto; } .kreistag-page .kreistag-card-wrap{ height: calc((100dvh - 170px) / 2); display: flex; align-items: center; justify-content: center; } /* WICHTIG: keine Verzerrung */ .kreistag-page img.kreistag-card{ max-height: 100%; width: auto; /* proportional */ max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.12); } } /* Falls Fensterhöhe klein (Laptop / Browserleisten): mehr Reserve */ @media (min-width: 901px) and (max-height: 820px){ .kreistag-page .kreistag-grid{ height: calc(100dvh - 210px); } .kreistag-page .kreistag-card-wrap{ height: calc((100dvh - 210px) / 2); } } /* Unter 900px (Handy/Tablet): mobile.css regelt das Layout – hier nichts kaputtmachen */ /* ========================= Letzter Menü-Button hervorheben ========================= */ /* letzter im Menü */ .menu a:last-child{ background: #c62828; /* SPD-Rot */ color: #ffffff; border-color: #c62828; font-weight: 800; } /* Hover/Fokus bleibt rot */ .menu a:last-child:hover, .menu a:last-child:focus-visible{ background: #b71c1c; color: #ffffff; } /* ================================ Letzter Menü-Button mit Bild ================================ */ .menu a:last-child{ background: #c62828; /* SPD-Rot */ color: #ffffff; border-color: #c62828; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 14px; } /* Rundes Bild rechts im Button */ .menu a:last-child::after{ content: ""; width: 100px; height: 100px; 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; } /* Hover bleibt rot */ .menu a:last-child:hover, .menu a:last-child:focus-visible{ background: #b71c1c; color: #ffffff; } /* --- NEU: Text unter den Bildern --- */ .kreistag-claim{ margin-top: 24px; text-align: center; font-size: 26px; font-weight: 800; color: #b71c1c; } /* ========================= Handy: Sidebar als Navigation UNTER dem Inhalt anzeigen nur Kreistag/Gemeinderäte ========================= */ @media (max-width: 1100px){ /* Sidebar NICHT verstecken */ .kreistag-page .sidebar, .gemeinde-page .sidebar{ display: block !important; position: static !important; top: auto !important; margin-top: 14px; } /* Layout: Inhalt oben, Sidebar unten */ .kreistag-page .layout, .gemeinde-page .layout{ grid-template-columns: 1fr; } .kreistag-page .content, .gemeinde-page .content{ order: 1; } .kreistag-page .sidebar, .gemeinde-page .sidebar{ order: 2; } /* Menü als Buttons auf Handy */ .kreistag-page .menu a, .gemeinde-page .menu a{ background: #eaf4ff; border: 1px solid #9bbce0; border-radius: 12px; padding: 12px 14px; font-size: 16px; } } /* ========================= Handy: SPD-Logo ausblenden ========================= */ @media (max-width: 1100px){ .kreistag-page .logo, .gemeinde-page .logo{ display: none !important; } } /* ========================================= Letzter Menü-Button auch auf Mobile rot ========================================= */ @media (max-width: 1100px){ /* letzter Button im Menü */ .kreistag-page .menu a:last-child, .gemeinde-page .menu a:last-child{ background: #c62828 !important; /* SPD-Rot */ color: #ffffff !important; border-color: #c62828 !important; font-weight: 800; } /* Hover / Tap bleibt rot */ .kreistag-page .menu a:last-child:hover, .gemeinde-page .menu a:last-child:hover{ background: #b71c1c !important; color: #ffffff !important; } } /* ========================================= Handy: Überschrift "SPD-Ortsverein Aßling" ausblenden ========================================= */ @media (max-width: 1100px){ .kreistag-page .sidebar h3, .gemeinde-page .sidebar h3{ display: none !important; } } /* ========================================= Handy: Abstand über dem ersten Kreistag-Bild ========================================= */ @media (max-width: 1100px){ .kreistag-page .content{ padding-top: 10px; /* kleiner Luftspalt nach oben */ } /* optional: etwas mehr Luft NUR über dem Grid */ .kreistag-page .kreistag-grid{ margin-top: 12px; } }