/*
Theme Name: S2Plus
Author: pletzenauer – digital consulting
Description: Block-Theme für S2Plus Architektur GmbH, gestaltet nach dem bisherigen Auftritt (Vollbild-Titelbilder, Menü hinter dem Plus, Anthrazit-Flächen, S2-Blau). Neu: besseres Verhalten auf dem Handy. Schrift: Basier Square + Basier Square Mono (Lizenz des Kunden, aus der bisherigen Website übernommen).
Version: 2.0.0
Requires at least: 6.5
Text Domain: s2plus
*/

/* ---------- Tokens (Werte aus der bisherigen Website) ---------- */
:root {
  --s2-bg: #fff;
  --s2-ink: #000;
  --s2-blue: #0089cd;
  --s2-panel: #333;        /* Anthrazit-Flächen: Team, Projekte, Menü */
  --s2-panel-2: #aaa;      /* helle Zeilen in der Projektliste */
  --s2-band: #ccc;         /* graues Band auf "Was wir tun" */
  --s2-on-panel: #fff;
  --s2-muted: #8a8a8a;
  --s2-empty: #e6e6e6;
  --s2-sans: BasierSquare, Helvetica, Arial, sans-serif;
  --s2-mono: BasierSquareMono, Monaco, monospace;
  --s2-h1: clamp(2.5rem, 1.2rem + 4.2vw, 4.5rem);   /* 72px am Desktop */
  --s2-pad: clamp(1rem, 5vw, 4.5rem);
  color-scheme: light;
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--s2-bg); color: var(--s2-ink); font: 400 16px/1.5 var(--s2-sans); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--s2-blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--s2-blue); outline-offset: 3px; }
h1, h2, h3, h4, h5 { font-weight: 400; margin: 12px 0 24px; }
p { margin: 16px 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.s2-icon { width: 100%; height: 100%; }
.s2-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--s2-bg); padding: 8px 12px; }
.s2-skip:focus { left: 8px; }
.s2-wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--s2-pad); }

/* Stufen-Überschriften: jede Zeile eigener Einzug (Wert in em pro Zeile) */
.s2-stair > span { display: block; padding-left: calc(var(--i, 0) * 1em); }
.s2-h1 { font-size: var(--s2-h1); line-height: 1.2; text-transform: uppercase; }
.s2-lead { font-size: 1.3rem; line-height: 1.5; }
.s2-kicker { display: inline-block; font-size: .9rem; letter-spacing: 2px; text-transform: uppercase; line-height: 1.4; padding-bottom: 3px; border-bottom: 2px solid var(--s2-blue); }
.s2-h3 { font-size: 1.75rem; line-height: 1.4; text-transform: uppercase; color: var(--s2-blue); text-align: center; margin: 32px 0 16px; }
.s2-signed { color: var(--s2-blue); font-size: .9rem; text-align: right; }
.s2-center { text-align: center; }

.s2-btn { display: inline-flex; align-items: center; gap: .35em; color: inherit; border: 1px solid currentColor; border-radius: 32px; padding: 8px 16px; font-weight: 600; font-size: 1rem; line-height: 1.15; letter-spacing: 1.6px; text-transform: uppercase; }
.s2-btn .s2-icon { width: 1em; height: 1em; }
.s2-btn:hover { text-decoration: none; background: var(--s2-ink); color: var(--s2-bg); }
.s2-btn--light { color: #fff; font-weight: 400; font-size: .9rem; padding: 8px 24px; }
.s2-btn--light:hover { background: #fff; color: #000; }

/* Pfeil nach unten / oben */
.s2-down, .s2-totop { display: block; width: 24px; height: 24px; color: var(--s2-ink); }
.s2-down { position: absolute; left: 50%; bottom: 40px; margin-left: -12px; z-index: 2; }
.s2-down--light { color: #fff; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .35)); }
.s2-totop { color: var(--s2-blue); }

/* ---------- Kopf: S2+ Architektur + Plus ---------- */
.s2-header { position: fixed; top: 16px; right: 24px; z-index: 60; display: flex; align-items: center; gap: 16px; }
.s2-brand { font: 600 .9rem/1.5 var(--s2-mono); text-transform: uppercase; color: var(--s2-blue); }
.s2-brand:hover { text-decoration: none; }
.s2-toggle { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--s2-blue); cursor: pointer; }
.s2-toggle::before, .s2-toggle::after { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 3px; margin-top: -1.5px; background: currentColor; transition: transform .3s ease; }
.s2-toggle::after { transform: rotate(90deg); }
.s2-menu-open .s2-toggle::before { transform: rotate(45deg) scaleX(1.1); }
.s2-menu-open .s2-toggle::after { transform: rotate(135deg) scaleX(1.1); }

.s2-overlay { position: fixed; inset: 0 0 0 auto; z-index: 55; width: max(33vw, 380px); display: flex; flex-direction: column; background: var(--s2-panel); color: var(--s2-on-panel); transform: translateX(100%); visibility: hidden; transition: transform .35s ease, visibility 0s .35s; }
.s2-menu-open .s2-overlay { transform: none; visibility: visible; transition: transform .35s ease; }
.s2-overlay__menu { list-style: none; margin: auto; padding: 0; width: min(300px, 80%); text-align: center; }
.s2-overlay__menu li + li { border-top: 1px solid rgba(255, 255, 255, .45); }
.s2-overlay__menu a { display: block; padding: 24px 0; color: #fff; font-size: 2rem; line-height: 1.5; text-transform: uppercase; }
.s2-overlay__menu a:hover, .s2-overlay__menu a[aria-current] { color: var(--s2-blue); text-decoration: none; }
.s2-overlay__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; padding: 24px; }

.s2-minimenu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 0; font-size: .9rem; }
.s2-overlay .s2-minimenu a { color: var(--s2-muted); font-family: var(--s2-mono); text-transform: uppercase; }
.s2-overlay .s2-minimenu a:hover { color: #fff; }


/* ---------- Titelbild ---------- */
.s2-hero { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden; background: #222; }
.s2-hero picture, .s2-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s2-hero__img { object-fit: cover; }
.s2-hero__logo { position: absolute; left: 50%; bottom: 12%; width: min(250px, 55vw); height: auto; transform: translateX(-50%); }
.s2-hero__text { position: absolute; left: 65%; top: 20%; color: #fff; text-shadow: 0 0 30px rgba(0, 0, 0, .25); }
.s2-hero__text h2 { margin: 0; font-size: var(--s2-h1); line-height: 1.3; text-transform: uppercase; }
.s2-main, .s2-footer { position: relative; z-index: 1; background: var(--s2-bg); }

/* ---------- Start ---------- */
.s2-start { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 48px; padding-top: 60px; padding-bottom: 110px; }
.s2-start__title { justify-self: center; }
.s2-start__text { max-width: 360px; justify-self: center; }
.s2-start__text p:not(.s2-signed) { font-size: 1.3rem; line-height: 1.5; hyphens: auto; }
.s2-start .s2-cta { grid-column: 1 / -1; }
.s2-cta { text-align: center; }
.s2-next { position: absolute; left: 50%; bottom: 24px; margin-left: -12px; width: 24px; height: 24px; color: var(--s2-ink); }

.s2-rotator { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #222; }
.s2-rotator__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.s2-rotator__track::-webkit-scrollbar { display: none; }
.s2-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.s2-slide picture, .s2-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s2-slide__head { position: absolute; left: 62%; top: 22%; color: #fff; font-size: var(--s2-h1); line-height: 1.5; text-transform: uppercase; text-shadow: 0 0 30px rgba(0, 0, 0, .3); }
.s2-slide__head h2 { font-size: inherit; line-height: inherit; margin: 0; }
.s2-slide__head p { margin: 0; }
.s2-slide__head .s2-btn { text-shadow: none; }
.s2-rotator__prev, .s2-rotator__next { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; padding: 10px; border: 0; background: none; color: #fff; cursor: pointer; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .4)); }
.s2-rotator__prev { left: 32px; }
.s2-rotator__next { right: 32px; }

/* ---------- Was wir tun / Projekte: Einleitung ---------- */
.s2-intro { position: relative; padding-top: 64px; padding-bottom: 110px; }
.s2-intro .s2-h1 { margin-left: 19%; }
.s2-intro .s2-text { max-width: 648px; margin: 48px auto 0; text-align: center; font-size: 1.3rem; line-height: 1.5; }

.s2-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1094px; margin-inline: auto; padding: 64px var(--s2-pad); }
.s2-gal a { display: block; height: 334px; overflow: hidden; }
.s2-gal--2 a { height: 301px; }
.s2-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.s2-gal a:hover img { transform: scale(1.03); }
.s2-gal .is-wide { grid-column: span 2; }
.s2-band { background: var(--s2-band); padding: 48px var(--s2-pad); text-align: center; }
.s2-band p { margin: 0 0 16px; }

/* ---------- Projekte: Übersicht ---------- */
.s2-split { display: grid; grid-template-columns: 1fr 1fr; }
.s2-split__title { background: var(--s2-panel); color: var(--s2-on-panel); }
.s2-split__title h2 { position: sticky; top: 72px; margin: 72px; font-size: clamp(2rem, 1rem + 3vw, 3.375rem); line-height: 1.3; text-transform: uppercase; }
.s2-split__content { padding: 72px 50px 96px; }
.s2-split__content > p { max-width: 288px; margin: 16px auto 48px; }
.s2-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 620px; margin-inline: auto; }
.s2-pgrid__item { display: block; color: var(--s2-blue); }
.s2-pgrid__item.is-big { grid-column: 1 / -1; }
.s2-pgrid__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--s2-empty); }
.s2-pgrid__item.is-big .s2-pgrid__img { aspect-ratio: 16 / 9; }
.s2-pgrid__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s ease; }
.s2-pgrid__item:hover .s2-pgrid__img img, .s2-pgrid__item:focus-visible .s2-pgrid__img img { filter: none; }
.s2-pgrid__label { display: block; margin-top: 12px; font-size: .9rem; line-height: 1.4; }

/* ---------- Projekte: Liste und Detail ---------- */
.s2-plist__item { display: grid; grid-template-columns: 1fr 1fr; min-height: 450px; scroll-margin-top: 0; }
.s2-plist__panel, .s2-detail__panel { position: relative; color: var(--s2-on-panel); background: var(--s2-panel); }
.s2-plist__panel { padding: 36px 120px 36px 72px; }
.s2-plist__panel.is-light { background: var(--s2-panel-2); }
.s2-plist__img { min-height: 450px; background: var(--s2-empty); }
.s2-plist__img img { width: 100%; height: 100%; object-fit: cover; }
.s2-ptitle p { margin: 16px 0; }
.s2-ptitle h2 { font-size: 2.5rem; line-height: 1.3; text-transform: uppercase; }
.s2-ptitle h2 small { display: block; font-size: .85em; line-height: 1.25; text-transform: none; }
.s2-pyear { font-size: 2rem; line-height: 1.5; margin: 0; }
.s2-ptext h4 { font-size: 1.3rem; line-height: 1.4; margin: 12px 0 8px; }
.s2-ptext p { font-size: .85rem; line-height: 1.5; margin: 0; }
.s2-videolink { color: inherit; display: block; }
.s2-videolink:hover h4 { color: var(--s2-blue); }
.s2-pmore a { font-size: 1.1rem; }
.s2-backbtn { position: absolute; top: 52px; right: 50px; display: block; width: 36px; height: 36px; padding: 8px; border: 1px solid currentColor; border-radius: 50%; color: #fff; }
.s2-backbtn:hover { background: #fff; color: #000; }

.s2-detail { display: grid; grid-template-columns: 1fr 1fr; }
.s2-sticky { position: sticky; top: 0; padding: 84px 120px 72px 72px; }
.s2-detail .s2-ptitle h2 { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.375rem); line-height: 1; }
.s2-detail .s2-backbtn { top: 96px; }
.s2-detail__imgs { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
.s2-detail__img img, .s2-detail__video { width: 100%; height: auto; }
.s2-detail__video { background: #000; }

/* ---------- Team ---------- */
.s2-teamblock { display: grid; grid-template-columns: 1fr 1fr; background: var(--s2-panel); }
.s2-teamblock__title h1 { position: sticky; top: 70px; margin: 70px 15%; color: var(--s2-on-panel); line-height: 1; }
.s2-teamblock__list { background: var(--s2-bg); padding: 70px 50px 96px; }
.s2-teamblock__text { max-width: 360px; margin-left: 124px; }
.s2-teamblock__text p { line-height: 1.3; }
.s2-team { display: grid; grid-template-columns: repeat(2, minmax(0, 284px)); gap: 40px; margin-top: 40px; }
.s2-member:first-child { grid-column: 1 / -1; max-width: 284px; }
.s2-member__img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--s2-empty); }
.s2-member__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.s2-member__addr { color: var(--s2-blue); line-height: 1.3; margin: 16px 0 0; }

/* ---------- Fuß / Kontakt ---------- */
.s2-footer { padding: 64px 144px 32px; }
.s2-footer__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; min-height: 560px; }
.s2-footer__map img { width: 100%; max-width: 560px; }
.s2-quote { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.25rem); line-height: 1.4; margin: 12px 0 72px 12%; }
.s2-quote span { display: block; }
.s2-quote span:nth-child(2) { padding-left: .17em; }
.s2-quote span:nth-child(3) { padding-left: .22em; }
.s2-quote span:nth-child(4) { padding-left: 1.94em; }
.s2-footer__contact { max-width: 307px; margin-left: auto; margin-right: 10%; }
.s2-footer__contact p a:not(.s2-maplink a) { color: inherit; }
.s2-maplink { padding-top: 32px; font-size: .8rem; line-height: 1.5; }
.s2-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 48px; }
.s2-footer__bottom .s2-totop { grid-column: 2; }
.s2-footer__bottom .s2-minimenu { grid-column: 3; justify-content: flex-end; }

/* ---------- Impressum, Datenschutz ---------- */
.s2-plain { padding: 120px var(--s2-pad) 64px; }
.s2-legal { max-width: 740px; margin-inline: auto; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.s2-legal h1 { font-size: 2rem; text-transform: uppercase; }
.s2-legal h2, .s2-legal h3 { font-size: 1.25rem; margin: 32px 0 12px; }
.s2-legal h4, .s2-legal h5 { font-size: 1rem; font-weight: 600; margin: 24px 0 8px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .s2-footer { padding-inline: var(--s2-pad); }
  .s2-teamblock__text { margin-left: 0; }
  .s2-plist__panel, .s2-sticky { padding-left: 40px; padding-right: 100px; }
  .s2-split__title h2 { margin: 56px 40px; }
}

/* ---------- Handy ---------- */
@media (max-width: 767px) {
  .s2-header { top: 12px; right: 16px; }
  .s2-overlay { width: 100%; }
  .s2-overlay__menu a { padding: 18px 0; font-size: 1.6rem; }

  .s2-hero__text { left: 50%; top: 18%; }
  .s2-start { grid-template-columns: 1fr; padding-top: 48px; }
  .s2-start__text { max-width: none; justify-self: stretch; }
  .s2-start__text p:not(.s2-signed) { font-size: 1.15rem; }
  .s2-slide__head { left: 12%; top: 20%; font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .s2-rotator__prev, .s2-rotator__next { top: auto; bottom: 24px; margin-top: 0; }
  .s2-rotator__prev { left: 8px; }
  .s2-rotator__next { right: 8px; }

  .s2-intro .s2-h1 { margin-left: 0; }
  .s2-intro .s2-text { margin-top: 24px; font-size: 1.15rem; }
  .s2-gal { grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 40px; }
  .s2-gal a, .s2-gal--2 a { height: auto; aspect-ratio: 4 / 3; }
  .s2-gal .is-wide { aspect-ratio: 16 / 9; }

  .s2-split, .s2-plist__item, .s2-detail, .s2-teamblock { grid-template-columns: 1fr; }
  .s2-split__title h2, .s2-teamblock__title h1 { position: static; margin: 0; padding: 48px var(--s2-pad); }
  .s2-split__content { padding: 32px 16px 64px; }
  .s2-pgrid { gap: 16px; }
  .s2-plist__item { min-height: 0; }
  .s2-plist__item:first-child .s2-plist__panel { padding-top: 64px; }
  .s2-plist__item:first-child .s2-backbtn { top: 64px; }
  .s2-plist__panel { padding: 24px 80px 24px var(--s2-pad); }
  .s2-plist__img { min-height: 0; aspect-ratio: 4 / 3; }
  .s2-ptitle p { margin: 0 0 8px; }
  .s2-ptitle h2 { font-size: 1.8rem; margin: 0 0 8px; }
  .s2-pyear { font-size: 1.5rem; }
  .s2-backbtn, .s2-detail .s2-backbtn { top: 24px; right: 16px; }
  .s2-sticky { position: static; padding: 72px 80px 32px var(--s2-pad); }
  .s2-detail .s2-ptitle h2 { font-size: 2.2rem; }
  .s2-teamblock__list { padding: 40px var(--s2-pad) 64px; }
  .s2-team { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .s2-member:first-child { max-width: calc(50% - 8px); }
  .s2-member__addr { font-size: .85rem; overflow-wrap: anywhere; }

  .s2-footer { padding: 48px var(--s2-pad) 32px; }
  .s2-footer__grid { grid-template-columns: 1fr; min-height: 0; gap: 32px; }
  .s2-footer__text { order: -1; }
  .s2-quote { margin: 0 0 32px; }
  .s2-quote span:nth-child(4) { padding-left: .6em; }
  .s2-footer__contact { max-width: none; margin: 0; }
  .s2-footer__bottom { grid-template-columns: 1fr; justify-items: center; }
  .s2-footer__bottom > * { grid-column: 1 !important; grid-row: auto !important; justify-self: center !important; }
  .s2-footer__bottom .s2-minimenu { justify-content: center; }
  .s2-plain { padding-top: 80px; }
}