/*
Theme Name: STADTSINN
Theme URI: https://stadtsinn-planung.ch
Author: Sebastian Bielski
Description: Block-Theme für STADTSINN, Büro für Stadt- und Mobilitätsplanung (Child-Theme von Twenty Twenty-Five). Quartiersplan-Design, alle Inhalte als Blöcke, Header und Footer unter Design → Editor, STADTSINN-Bausteine als Vorlagen. Einrichtung unter Design → STADTSINN Einrichtung.
Template: twentytwentyfive
Version: 3.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: stadtsinn
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   Grundlagen, Header, Navigation und Footer.
   Das Design der Inhalte liegt in assets/css/stil-v1.css (Bausteine)
   und assets/css/seiten.css (Unterseiten), Anpassungen an die
   WordPress-Blöcke in assets/css/bloecke.css.
   ========================================================= */

:root {
  --hd-bg: #4a4238;
  --hd-accent: #c2e091;
  --hd-text: #ffffff;
  --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1300px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: #43545C;
  background: #F5F2E8;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; }
a { color: #2B6B6A; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #F5B921; outline-offset: 3px; }
p { margin: 0 0 1em; }

.wrap { width: min(var(--wrap), 92%); margin-inline: auto; }

/* Footer auch auf kurzen Seiten unten */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .ss { flex: 1 0 auto; }
.wp-site-blocks > * { margin-block: 0; }

/* Inhaltsbereich wie die bisherige Seite (.ss) */
.wp-block-post-content { font-size: 1.05rem; line-height: 1.7; }

/* Bilder in Bausteinen: Abstände regeln die Bausteine selbst */
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .wp-block-image { margin: 0; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .wp-block-image img { vertical-align: top; }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(.site-header) {
  position: sticky; top: 0; z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }

.site-header { background: var(--hd-bg); color: var(--hd-text); }
.site-header p { margin: 0; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 90px; position: relative;
}
.brand { position: relative; display: flex; flex-direction: column; line-height: 1.3; flex: 0 0 auto; }
.brand-name { font-weight: 700; letter-spacing: .14em; font-size: 16px; }
.brand-name a { color: #fff; text-decoration: none; }
.brand-name a::after { content: ""; position: absolute; inset: 0; }
.brand-sub { font-size: 11px; font-style: italic; opacity: .8; color: #fff; }
.header-tel a { color: var(--hd-accent); font-weight: 500; white-space: nowrap; font-size: 13px; text-decoration: none; }
.header-tel a:hover { color: #fff; }

/* Navigation (Block «Navigation») – Desktop */
.site-header .wp-block-navigation { margin-left: auto; font-size: 16px; }
.site-header .wp-block-navigation__container { gap: 6px; }
.site-header .wp-block-navigation .wp-block-navigation-item__content {
  color: #fff; font-size: 16px; font-weight: 700; padding: 10px 10px; text-decoration: none;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] { color: var(--hd-accent); text-decoration: none; }
.site-header .wp-block-navigation .has-child > .wp-block-navigation-item__content { padding-right: 2px; }
.site-header .wp-block-navigation__submenu-icon { color: #fff; margin-left: 2px; margin-right: 8px; width: .7em; height: .7em; }
.site-header .wp-block-navigation__submenu-icon svg { stroke: currentColor; }
.site-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-icon { color: var(--hd-accent); }

.site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  background: #fff; color: #17323F; border: 0; border-radius: 22px; padding: .7rem;
  left: -6px; top: 100%; z-index: 60;
  box-shadow: 0 22px 44px -18px rgba(23,50,63,.45);
}
.site-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { min-width: 300px; }
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; margin: 0; }
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; padding: .55rem .9rem; color: #17323F; font-size: 15px; font-weight: 600; border-radius: 12px; white-space: normal; line-height: 1.35;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container [aria-current="page"] { background: #E3EAD1; color: #17323F; }

/* Knopf «Menü» und mobiles Menü */
.site-header .wp-block-navigation__responsive-container-open {
  color: #fff; background: none; border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
  padding: .45rem 1rem; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; cursor: pointer;
}
.site-header .wp-block-navigation__responsive-container-open:hover { border-color: #fff; }

.site-header .wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: stretch;
  --navigation-layout-justify: flex-start;
  background: var(--hd-bg) !important; color: #fff !important;
  padding: 18px 4vw 32px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: stretch !important; text-align: left; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; text-align: left; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; top: 22px; right: 4vw; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px; align-items: stretch; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); align-items: stretch;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 14px 0; font-size: 18px; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: rgba(255,255,255,.07) !important; border-radius: 16px; padding: .4rem !important; margin: 0 0 12px; width: 100%; min-width: 0 !important; box-shadow: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: #fff; font-weight: 500; font-size: 15px; padding: .55rem .9rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container [aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }

/* Mobiles Menü schon unter 992 px (Standard wären 600 px) */
@media (min-width: 600px) and (max-width: 991px) {
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (max-width: 1100px) {
  .header-tel { display: none; }
}
@media (max-width: 991px) {
  .header-inner { min-height: 72px; }
}
@media (max-width: 520px) {
  .brand-sub { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--hd-bg); color: rgba(255,255,255,.85); padding: 50px 0 18px; font-size: 14px; }
.site-footer p { margin: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--hd-accent); }
.site-footer strong { color: #fff; letter-spacing: .14em; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr; }
.footer-about p + p { margin: .6rem 0 0; max-width: 380px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer-grid li { margin: 0; }
.site-footer .copyright { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; opacity: .75; }
@media (max-width: 778px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- WordPress-Kleinigkeiten ---------- */
.alignwide { max-width: 1180px; margin-inline: auto; }
.alignfull { width: 100%; }
.wp-element-caption, .wp-caption-text, .gallery-caption { font-size: .85rem; }
.screen-reader-text:not(:focus) { position: absolute !important; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }