/*
Theme Name: Sarasin
Theme URI: https://www.foxcomputers.ch
Author: Fox Computers
Author URI: https://www.foxcomputers.ch
Version: 2026
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: sarasin

Sarasin WordPress Theme 2011-2026
Sarasin is distributed under the terms of the GNU GPL
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* Farben (aus Figma gemessen) */
    --c-black:#000000;
    --c-white:#FFFFFF;
    --c-blue:#78D2FF;
    --c-yellow:#FFEE00;
    --c-violet:#A346FF;
    --c-red:#FF0000;
    --c-green:#0AFF31;
    --c-pink:#FFD5CE;
    --c-gray:#D9D9D9;
    --c-text:#000000;
    --c-bg:#FFFFFF;

    /* Schriften */
    --f-serif:'Libre Caslon Text', Georgia, serif;
    /* Alaska ersetzt Modern Gothic, Helvetica Now Display und Roboto — Titel bleiben Libre Caslon */
    --f-sans:'Alaska', Helvetica, Arial, sans-serif;
    --f-display:'Alaska', Helvetica, Arial, sans-serif;
    --f-ui:'Alaska', Arial, sans-serif;

    /* Typo-Skala Desktop (1440) */
    --fs-hero-serif:88px;
    --fs-image-title:88px;
    --fs-tile-title:92px;
    --fs-tile-title-s:46px;
    --fs-h2:50px;
    --fs-h3:36px;
    --fs-body-l:36px;
    --fs-body:28px;
    --fs-termine:40px;
    --fs-menu:60px;
    --fs-wortmarke:92px;
    --fs-btn:24px;
    --fs-btn-s:20px;
    --fs-small:18px;
    --fs-legal:14px;

    --lh-serif:1.15;
    --lh-head:1.08;
    --lh-body:1.23;
    /* Lauftext im Text-Modul (Gutenberg-Absaetze und -Listen): Desktop
       28/38, Tablet 22/30, Mobil 24/28 — nur dort, sonst gilt --lh-body */
    --fs-copy:28px;
    --lh-copy:38px;

    /* Layout */
    --container:1440px;
    --pad-x:60px;
    --section-gap:140px;
    --section-gap-mob:64px;
    --gap:32px;

    /* Komponenten */
    --pill-h:66px;
    --pill-h-s:42px;
    --radius-pill:999px;
    --line:1px solid var(--c-black);
    --line-thick:3px solid var(--c-black);
    --trans:all .4s ease;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

* {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    outline:none;
    box-sizing:border-box;
    -webkit-appearance:none;
    appearance:none;
    border-radius:0;
}
/* Der Reset nimmt outline:none — Tastatur-Fokus kommt hier als
   :focus-visible zurueck (nur Tastatur, kein Ring bei Mausklicks) */
:focus-visible {
    outline:2px solid var(--c-black);
    outline-offset:3px;
}
/* Formularfelder ohne Fokus-Ring: Rahmen bzw. Farbflaeche und Cursor
   zeigen den Fokus, der Ring stoert die Optik (Newsletter-Feld) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:none;
}
html {
    -webkit-text-size-adjust:100%;
}
ul, ol {
    list-style:none;
}
a {
    color:inherit;
    text-decoration:none;
}
img, svg, video {
    display:block;
    max-width:100%;
    height:auto;
}
button {
    background:none;
    cursor:pointer;
    color:inherit;
}
input, textarea, select {
    font:inherit;
    color:inherit;
    background:none;
}
::placeholder {
    color:rgba(0,0,0,.35);
    opacity:1;
}

/* ==========================================================================
   3. Basis-Typografie
   ========================================================================== */

body {
    font-family:var(--f-sans);
    font-weight:400;
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    color:var(--c-text);
    background:var(--c-bg);
}
h1, h2, h3, h4 {
    font-family:var(--f-display);
    font-weight:500; /* Alaska Medium */
    line-height:var(--lh-head);
}
/* Nur h1 in Caslon — greift auch fuer Bloecke,
   deren Titel-Ebene auf h1 gestellt ist */
h1 {
    font-family:var(--f-serif);
    font-weight:400;
}
strong, b {
    font-weight:500;
}
em, i {
    font-style:italic;
}
/* Zitat-Schrift zusaetzlich global abgesichert — das Block-CSS
   traegt dieselbe Regel; hier greift sie auch, falls jenes nicht laedt */
.sb-zitat-quote {
    font-family:var(--f-serif);
    font-style:italic;
}
.serif {
    font-family:var(--f-serif);
    font-weight:400;
}

/* Fliesstext-Inhalte (WYSIWYG / InnerBlocks) */
.text p, .text ul, .text ol {
    margin-bottom:1.2em;
}
.text p:last-child, .text ul:last-child, .text ol:last-child {
    margin-bottom:0;
}
.text ul li {
    padding-left:1.2em;
    position:relative;
}
.text ul li::before {
    content:'–';
    position:absolute;
    left:0;
}
.text ol {
    counter-reset:sarasin-ol;
}
.text ol li {
    padding-left:1.6em;
    position:relative;
    counter-increment:sarasin-ol;
}
.text ol li::before {
    content:counter(sarasin-ol) '.';
    position:absolute;
    left:0;
}
.text a {
    text-decoration:underline;
    text-underline-offset:.15em;
    transition:var(--trans);
}
.text a:hover {
    /* Nicht Gruen auf Weiss (Kontrast 1.37:1, praktisch unsichtbar) —
       Hover als dickere Linie; Rueckbau = color:var(--c-green) */
    text-decoration-thickness:.14em;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

#wrapper {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}
#container {
    flex:1 0 auto;
}
#content {
    display:block;
}
.inner {
    max-width:var(--container);
    margin:0 auto;
    padding-left:var(--pad-x);
    padding-right:var(--pad-x);
}
.screen-reader-text {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}
.skip-link {
    position:absolute;
    left:-9999px;
    top:0;
    background:var(--c-black);
    color:var(--c-white);
    padding:12px 24px;
    z-index:300;
}
.skip-link:focus {
    left:0;
}

/* ==========================================================================
   5. Buttons & Formular-Elemente
   ========================================================================== */

/* Eigene Feldmeldungen der Formulare (assets/js/form-validate.js
   und blocks/objekt-upload/script.js) */
.sarasin-fielderror {
    margin-top:8px;
    font-size:var(--fs-small);
    color:var(--c-red);
}
form .input-pill.is-invalid,
form .input-flat.is-invalid {
    outline:2px solid var(--c-red);
    outline-offset:-2px;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--f-sans);
    font-weight:400;
    font-size:var(--fs-btn);
    line-height:1;
    height:var(--pill-h);
    padding:0 44px;
    border-radius:var(--radius-pill);
    transition:var(--trans);
    cursor:pointer;
    /* Beschriftung nie zweizeilig — Button-Gruppen brechen stattdessen
       als Ganzes um (flex-wrap in den Containern) */
    white-space:nowrap;
    max-width:100%;
}
.btn-outline {
    border:var(--line);
    background:var(--c-white);
    color:var(--c-black);
}
.btn-outline:hover {
    background:var(--c-black);
    color:var(--c-white);
}
.btn-black {
    background:var(--c-black);
    color:var(--c-white);
}
.btn-black:hover {
    background:var(--c-green);
    color:var(--c-black);
}
/* Auf roten Flaechen: schwarz/weiss als Ruhezustand, Hover invertiert
   auf weiss/schwarz — gilt fuer alle Button-Varianten
   im roten Modul */
.sb-item.bg-red .btn {
    background:var(--c-black);
    color:var(--c-white);
    border-color:var(--c-black);
}
.sb-item.bg-red .btn:hover {
    background:var(--c-white);
    color:var(--c-black);
    box-shadow:none;
}
/* Auf gruenen Flaechen waere der gruene Hover unsichtbar — dort
   bekommt der Button einen schwarzen 2px-Rand (inset, kein
   Layout-Shift) */
.bg-green .btn-black:hover,
.sb-login-form .btn-black:hover,
.sb-registrierung .btn-black:hover {
    box-shadow:inset 0 0 0 2px var(--c-black);
}
.btn-green {
    background:var(--c-green);
    color:var(--c-black);
}
.btn-green:hover {
    background:var(--c-black);
    color:var(--c-white);
}
.btn-s {
    height:var(--pill-h-s);
    font-size:var(--fs-btn-s);
    padding:0 26px;
}

.input-pill {
    display:block;
    width:100%;
    height:var(--pill-h);
    padding:0 32px;
    border:var(--line);
    border-radius:var(--radius-pill);
    background:var(--c-white);
    font-size:var(--fs-body);
}
.input-flat {
    display:block;
    width:100%;
    height:48px;
    padding:0 16px;
    border:1px solid var(--c-black);
    background:var(--c-white);
    font-size:var(--fs-small);
}
.input-rosa {
    display:block;
    width:100%;
    padding:14px 20px;
    background:var(--c-pink);
    font-size:var(--fs-body);
}
textarea.input-rosa {
    min-height:180px;
    resize:vertical;
}

/* Honeypot: visuell und für Screenreader raus, für Bots ausfuellbar */
.sarasin-hp {
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* Fixiertes Wappen oben links mit Link zur Startseite — auf allen Seiten
   ausser der Startseite selbst. Unter dem Overlay
   (z 210), damit das Menue es ueberdeckt. */
.site-wappen {
    position:fixed;
    top:24px;
    left:var(--pad-x);
    /* UNTER #header (200): das Overlay lebt im Header-Stacking-Kontext —
       mit hoeherem z-index laege das Wappen ueber dem offenen Menue */
    z-index:190;
    display:block;
    line-height:0;
}
.site-wappen img {
    height:76px;
    width:auto;
    display:block;
}

/* ==========================================================================
   6. Header & Burger-Overlay
   ========================================================================== */

#header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:200;
    pointer-events:none;
}
#burger {
    pointer-events:auto;
    position:absolute;
    top:38px;
    /* Burger auch auf Desktop rechts */
    right:var(--pad-x);
    width:58px;
    height:34px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:2px 0;
    z-index:220;
}
#burger span {
    display:block;
    width:100%;
    height:3px;
    background:var(--c-black);
    transition:var(--trans);
}
.menu-open #burger span:nth-child(1) {
    transform:translateY(12.5px) rotate(45deg);
}
.menu-open #burger span:nth-child(2) {
    opacity:0;
}
.menu-open #burger span:nth-child(3) {
    transform:translateY(-12.5px) rotate(-45deg);
}

#overlay {
    position:fixed;
    inset:0;
    background:var(--c-green);
    z-index:210;
    overflow-y:auto;
    pointer-events:auto;
    transform:translateX(-101%);
    visibility:hidden;
    transition:transform .5s cubic-bezier(.77,0,.18,1), visibility 0s .5s;
}
.menu-open #overlay {
    transform:translateX(0);
    visibility:visible;
    transition:transform .5s cubic-bezier(.77,0,.18,1), visibility 0s 0s;
}
.menu-closing #overlay {
    transform:translateX(-101%);
    visibility:visible;
    transition:transform 1s cubic-bezier(.77,0,.18,1); /* wie Seiten-Wipe-Fallback */
}
.menu-open {
    overflow:hidden;
}
/* Scrollbar-Rinne dauerhaft reservieren: overflow:hidden liesse die
   Browser-Scrollbar sonst verschwinden und die Seite beim Oeffnen des
   Menues seitlich ruckeln. Auf Overlay-Scrollbars (macOS,
   Mobile) ohne Effekt. */
html {
    scrollbar-gutter:stable;
}

/* Seiten-Wipe: deckt beim Laden in der Kopffarbe ab und fliesst nach rechts
   raus. Mit JS uebernimmt der Fluid-Wipe (organische SVG-Kante, theme.js);
   ohne JS laeuft dieser gerade CSS-Fallback. */
#page-wipe {
    position:fixed;
    inset:0;
    z-index:400;
    pointer-events:none;
    animation:sarasin-wipe-out 1s .15s cubic-bezier(.77,0,.18,1) forwards;
}
#page-wipe.is-in {
    animation:none;
}
@keyframes sarasin-wipe-out {
    from { transform:translateX(0); }
    to { transform:translateX(101%); }
}
#page-wipe svg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
}
#page-wipe.bg-white { color:var(--c-white); }
#page-wipe.bg-blue { color:var(--c-blue); }
#page-wipe.bg-yellow { color:var(--c-yellow); }
#page-wipe.bg-violet { color:var(--c-violet); }
#page-wipe.bg-red { color:var(--c-red); }
#page-wipe.bg-green { color:var(--c-green); }
#page-wipe.bg-pink { color:var(--c-pink); }

/* Kopfbereich-Icon faehrt nach dem Wipe mit Opacity + Schub ein;
   die TITEL bekommen stattdessen den Buchstaben-Reveal (theme.js headingReveal): Zeilen-Masken, Buchstaben einzeln von
   unten, gestaffelt. */
.has-fluid .ph-color .ph-visual {
    opacity:0;
    transform:translateX(-44px);
}
.has-fluid.wipe-done .ph-color .ph-visual {
    opacity:1;
    transform:none;
    transition:opacity 1.1s ease, transform 1.1s ease;
}

/* Buchstaben-Reveal: Titel bleibt unsichtbar, bis der Split steht
   (rv-ready), dann schieben die Buchstaben aus der Zeilen-Maske hoch */
.has-fluid .ph-title:not(.rv-ready),
.has-fluid .objekt-title:not(.rv-ready) {
    opacity:0;
}
/* Masken-Struktur exakt wie SplitText: die MASKE ist ein
   eigenes Element ohne Pads/Margins (Kante = Zeilenkasten, keine
   Ueberlappung benachbarter Zeilen); die Pads mit negativen Margins
   liegen auf der inneren Zeile, damit Ober-/Unterlaengen ganz bleiben. */
.rv-mask {
    display:block;
    overflow:clip;
    /* horizontaler Puffer: die Buchstaben-Spans verlieren das Kerning
       der Serif — die Zeile wird ein paar Pixel breiter als gemessen
       und darf nicht angeschnitten werden */
    padding:0 .12em;
    margin:0 -.12em;
}
.rv-line {
    display:block;
    position:relative;
    padding:.16em 0;
    margin:-.16em 0;
    /* NIE intern umbrechen — sonst waechst die Maske und die
       Startpositionen werden sichtbar */
    white-space:nowrap;
}
.rv-word {
    display:inline-block; /* verhindert Umbruch mitten im Wort */
}
.rv-char {
    display:inline-block;
    /* exakt eine Zeilenhoehe unter dem Boden */
    transform:translateY(110%);
}
.rv-in .rv-char {
    transform:translateY(0);
    /* 1.2s power2.out */
    transition:transform 1.2s cubic-bezier(.215, .61, .355, 1);
}

/* Startseiten-Kacheln: Entree nach dem Wipe — jede Kachel
   steigt mit Opacity, leichtem Schub und sanftem Overshoot gestaffelt
   ein. Nur im Fluid-Modus; ohne JS/bei reduced motion statisch. */
.has-fluid .ph-grid .tile {
    opacity:0;
    transform:translateY(36px) scale(.96);
}
.has-fluid.wipe-done .ph-grid .tile {
    opacity:1;
    transform:none;
    transition:opacity .7s ease, transform .85s cubic-bezier(.34, 1.45, .64, 1);
}
.has-fluid.wipe-done .ph-grid .tile:nth-child(2) { transition-delay:.09s; }
.has-fluid.wipe-done .ph-grid .tile:nth-child(3) { transition-delay:.18s; }
.has-fluid.wipe-done .ph-grid .tile:nth-child(4) { transition-delay:.27s; }
.has-fluid.wipe-done .ph-grid .tile:nth-child(5) { transition-delay:.36s; }
.has-fluid.wipe-done .ph-grid .tile:nth-child(6) { transition-delay:.45s; }
.has-fluid.wipe-done .ph-grid .tile:nth-child(n+7) { transition-delay:.54s; }

/* Fluid-Modus: Div wird transparent, die Farbe lebt im SVG-Pfad */
.has-fluid #page-wipe {
    background:transparent;
    animation:none;
    transform:none;
}

/* Fluid-Modus: Overlay slidet nicht selbst — der gruene Wipe bringt es,
   beim Schliessen fliesst es per clip-path ab (theme.js) */
.has-fluid #overlay {
    transition:none;
    transform:none;
    visibility:hidden;
}
.has-fluid .menu-open #overlay,
.has-fluid.menu-open #overlay {
    transform:none;
    visibility:visible;
}
.has-fluid .menu-closing #overlay,
.has-fluid.menu-closing #overlay {
    transform:none;
    visibility:visible;
}
#overlay .inner {
    padding-top:120px;
    padding-bottom:80px;
    min-height:100%;
    display:flex;
    flex-direction:column;
}
#overlay-menu li a {
    display:inline-block;
    font-family:var(--f-sans);
    /* Medium; Alaska hat die Italic nur in 400, darum stellt der Hover
       den Schnitt schraeg statt auf die Italic zu wechseln */
    font-weight:500;
    font-size:var(--fs-menu);
    line-height:1.2;
    color:var(--c-black);
    transition:var(--trans);
    transform-origin:left bottom;
}
#overlay-menu li a:hover,
#overlay-menu li a:focus-visible {
    transform:skewX(-9deg);
    padding-left:.3em;
    outline:none;
}
/* Menue-Buttons, Burger und Objekt-×: kein Fokusring (auch nicht bei
   programmatischem Fokus beim Oeffnen des Menues); Tastatur sieht den
   Hover-Zustand */
#overlay-actions .btn:focus-visible {
    outline:none;
    background:var(--c-black);
    color:var(--c-white);
}
#burger:focus-visible,
.objekt-close:focus-visible {
    outline:none;
}
#overlay-actions {
    margin-top:56px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

#footer {
    border-top:var(--line);
    background:var(--c-bg);
    /* kein margin-top: das letzte Modul bestimmt den Abstand selbst
       (Farbflaechen schliessen buendig an) */
}
#footer .inner {
    padding-top:72px;
    padding-bottom:28px;
}
.footer-top {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--gap);
}
.footer-brand {
    display:grid;
    grid-template-columns:auto;
    grid-template-areas:
        "wm"
        "pills";
    align-items:center;
    row-gap:44px;
    justify-items:start;
}
.footer-brand .wortmarke {
    grid-area:wm;
    font-family:var(--f-display);
    font-weight:500;
    font-size:var(--fs-wortmarke);
    line-height:1;
    letter-spacing:-.01em;
    color:var(--c-black);
    display:inline-block;
    white-space:nowrap;
}
/* Zwischen Tablet-Umbruch und voller Breite schrumpft die Wortmarke
   fliessend, damit Wortmarke und Newsletter-Block nebeneinander in den
   Container passen (Newsletter-Block ist mindestens ~440px breit) */
@media only screen and (min-width:1024px) {
    .footer-brand .wortmarke {
        font-size:min(var(--fs-wortmarke), calc(12.8vw - 74px));
    }
}
.footer-actions {
    grid-area:pills;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:24px;
}
.footer-news {
    padding-top:14px;
    max-width:440px;
}
.footer-news-label {
    font-size:var(--fs-small);
    margin-bottom:12px;
    display:block;
}
/* Eingabefeld und Button bleiben auf jeder Breite in einer Zeile:
   das Feld nimmt den Rest, der Button bricht nie um */
.footer-news-form {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:16px;
}
.footer-news-form .input-flat {
    flex:1 1 0;
    min-width:120px;
    width:auto;
}
.footer-news-form .btn {
    flex:0 0 auto;
}
.footer-news-note {
    font-size:var(--fs-legal);
    margin-top:10px;
}
.footer-news-note a {
    text-decoration:underline;
}
/* Immer im DOM sichtbar (leer = kollabiert): aria-live-Regionen, die per
   display:none starten, werden von manchen Screenreadern nie vorgelesen */
.footer-news-feedback {
    font-size:var(--fs-small);
    margin-top:10px;
}
.footer-news-feedback:empty {
    margin-top:0;
}
.footer-bottom {
    margin-top:64px;
    border-top:var(--line);
    padding-top:10px;
    display:flex;
    justify-content:flex-end;
    gap:6px;
    font-size:var(--fs-legal);
    font-family:var(--f-ui);
}
.footer-legal a {
    transition:var(--trans);
}
.footer-legal a:hover {
    text-decoration:underline;
}

/* ==========================================================================
   8. Kopfbereich & Kacheln
   ========================================================================== */

.page-header {
    margin-bottom:var(--section-gap);
}

/* Layout: Farbflaeche */
.ph-color {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:110px var(--pad-x) 95px;
    min-height:100vh;
    min-height:100svh;
}
.ph-color .ph-visual img {
    margin:0 auto 34px;
    max-height:180px;
    width:auto;
}
/* Wappen groesser als Icons (318px, Icons bleiben) */
.ph-color .ph-visual.is-wappen img {
    height:318px;
    max-height:318px;
}
/* Hero-Titel skalieren fliessend mit dem Viewport statt in
   Breakpoint-Stufen; Seitenabstand min. 32px siehe Regel am Dateiende */
.ph-color .ph-title {
    font-family:var(--f-serif);
    font-weight:400;
    font-size:clamp(40px, 6.5vw, 88px);
    line-height:var(--lh-serif);
    max-width:1100px;
}
/* Ohne Icon/Wappen darf der Titel die Flaeche fuellen —
   fluid bis 200px */
.ph-color.is-no-visual .ph-title {
    font-size:clamp(52px, 14vw, 200px);
    max-width:none;
}

/* Layout: Kachelgrid — fuellt wie die Farbflaeche den ganzen Viewport */
.ph-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:1fr;
    min-height:100vh;
    min-height:100svh;
}
.ph-grid .tile {
    min-height:0;
}
.ph-grid .tile-title {
    font-size:75px; /* fix auf allen Breakpoints */
}
.ph-grid .tile-title-s {
    font-size:var(--fs-tile-title-s);
}
.ph-grid .tile-text {
    font-size:clamp(15px, 0.9vw + 1.4vh, 25px);
}
.tile {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    min-height:405px;
    padding:40px 60px 52px 60px;
    color:var(--c-black);
}
.tile-plus {
    position:absolute;
    top:33px;
    left:28px;
    width:44px;
    height:44px;
}
.tile-plus svg {
    width:100%;
    height:100%;
}
/* Titel zentriert in der freien Flaeche zwischen Kacheloberkante und
   Text; der Text bleibt unten */
.tile-title {
    position:relative;
    font-family:var(--f-serif);
    font-weight:400;
    font-size:var(--fs-tile-title);
    line-height:var(--lh-serif);
    text-align:center;
    margin-top:auto;
    margin-bottom:auto;
}
.tile-title .tt-r,
.tile-title .tt-i {
    transition:opacity .6s ease;
}
.tile-title .tt-i {
    position:absolute;
    left:0;
    right:0;
    top:0;
    font-style:italic;
    opacity:0;
}
a.tile:hover .tt-r,
.tile.is-hover .tt-r {
    opacity:0;
}
a.tile:hover .tt-i,
.tile.is-hover .tt-i {
    opacity:1;
}
.tile-title-s {
    font-size:var(--fs-tile-title-s);
    margin-top:0;
}
.tile-text {
    align-self:flex-start;
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    padding-top:28px;
    transform: translateY(0);
    transition: all .8s ease;
}
a.tile:hover .tile-text {
    transform: translateY(-24px);
    transition: all .8s ease;
}
.tile-brand {
    justify-content:center;
}
.tile-brand .ph-visual img {
    max-height:198px;
    width:auto;
    margin:0 auto 26px;
    transition:transform .4s ease;
}
/* Hover der (verlinkten) Wappen-Kachel: Wappen waechst */
a.tile-brand:hover .ph-visual img {
    transform:scale(1.1);
}

/* Layout: Vollbild-Foto */
.ph-image .ph-image-media img {
    width:100%;
    height:auto;
    max-height:88vh;
    object-fit:cover;
}
.ph-image .ph-title {
    font-family:var(--f-serif);
    font-weight:400;
    font-size:clamp(40px, 6.5vw, 88px);
    line-height:var(--lh-serif);
    text-align:center;
    max-width:1000px;
    margin:0 auto;
    padding:85px max(32px, var(--pad-x)) 0;
}

/* ==========================================================================
   9. Sitebuilder-Grundlagen
   ========================================================================== */

.sb-item {
    margin-top:var(--section-gap);
}
.sb-item:first-child {
    margin-top:0;
}
/* Abstand vor dem Footer: Module auf Body-Hintergrund
   halten Abstand zur Footer-Linie; Module mit eigener Farbflaeche
   (bg-*-Klassen sowie Login/Registrierung mit fixem Gruen) schliessen
   buendig an — deren Luft ist inneres Padding */
#sitebuilder > .sb-item:last-child {
    margin-bottom:var(--section-gap);
}
#sitebuilder > .bg-blue:last-child,
#sitebuilder > .bg-yellow:last-child,
#sitebuilder > .bg-violet:last-child,
#sitebuilder > .bg-red:last-child,
#sitebuilder > .bg-green:last-child,
#sitebuilder > .bg-pink:last-child,
#sitebuilder > .sb-login-form:last-child,
#sitebuilder > .sb-registrierung:last-child,
#sitebuilder > .sb-danke:last-child {
    margin-bottom:0;
}
#sitebuilder:empty {
    display:none;
}
/* Einzelnes Sitebuilder-Element fuellt mindestens den Viewport, damit
   der Footer nicht mitten im Bildschirm haengt */
#sitebuilder > .sb-item:only-child,
#sitebuilder > .screen-reader-text + .sb-item:last-child {
    /* Volle Hoehe abzueglich Footer — --sarasin-footer-h
       setzt theme.js; ohne JS greift der 0px-Fallback (voller vh) */
    min-height:calc(100svh - var(--sarasin-footer-h, 0px));
}
/* Danke-Sektion zentriert ihren Inhalt, wenn sie die volle Hoehe hat */
#sitebuilder > .sb-danke:only-child,
#sitebuilder > .screen-reader-text + .sb-danke:last-child {
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* Ohne Kopfbereich beginnt die ERSTE Sektion direkt am Browserrand und
   traegt die Luft als eigenes Padding — eine Farbflaeche reicht damit
   bis ganz nach oben */
.no-hero #sitebuilder > .sb-item:first-child,
.no-hero #sitebuilder > .screen-reader-text + .sb-item {
    margin-top:0;
    padding-top:180px;
}
.sb-item.is-off {
    opacity:.45;
}
.bg-white { background:var(--c-white); }
.bg-blue { background:var(--c-blue); }
.bg-yellow { background:var(--c-yellow); }
.bg-violet { background:var(--c-violet); }
.bg-red { background:var(--c-red); }
/* Auf Rot ist schwarzer Text schlecht lesbar — Module mit roter
   Hintergrundfarbe schalten die Schrift auf Weiss */
.sb-item.bg-red { color:var(--c-white); }
.bg-green { background:var(--c-green); }
.bg-pink { background:var(--c-pink); }

/* ==========================================================================
   10. 404
   ========================================================================== */

.error404-hero {
    min-height:70vh;
    display:flex;
    align-items:center;
    text-align:center;
}
.error404-hero .inner {
    width:100%;
    padding-top:120px;
    padding-bottom:80px;
}
.error404-hero h1 {
    font-family:var(--f-serif);
    font-weight:400;
    font-size:var(--fs-hero-serif);
    line-height:var(--lh-serif);
    margin-bottom:24px;
}
.error404-hero p {
    margin-bottom:40px;
}

/* ==========================================================================
   11. Editor
   ========================================================================== */

.editor-styles-wrapper {
    font-family:var(--f-sans);
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    color:var(--c-text);
}
.editor-styles-wrapper .is-root-container {
    padding:0;
}

/* Der Canvas zeigt immer die DESKTOP-Darstellung:
   Media Queries reagieren im Editor auf die iframe-Masse (z. B. 1290x589
   bei offener Sidebar) und wuerden Tablet-Tokens laden bzw. Kacheltexte
   ausblenden. Tokens auf dem Wrapper uebersteuern die :root-Werte der
   Breakpoints unabhaengig von der Reihenfolge (naeherer Vorfahre). */
.editor-styles-wrapper {
    --fs-hero-serif:88px;
    --fs-image-title:88px;
    --fs-tile-title:92px;
    --fs-tile-title-s:46px;
    --fs-h2:50px;
    --fs-h3:36px;
    --fs-body-l:36px;
    --fs-body:28px;
    --fs-copy:28px;
    --lh-copy:38px;
    --fs-termine:40px;
    --fs-btn:24px;
    --fs-btn-s:20px;
    --fs-small:18px;
    --fs-legal:14px;
    --pad-x:60px;
    --section-gap:140px;
    --pill-h:66px;
    --pill-h-s:42px;
}
/* Responsive Ausblendungen/Umbauten im Canvas neutralisieren */
.editor-styles-wrapper .ph-grid {
    grid-template-columns:1fr 1fr;
}
/* Editor-Canvas: Preview ansehen, nie benutzen — Links und
   Formulare sind im Editor tote Flaechen (pointer-events:none): der
   Klick faellt aufs Eltern-Element durch und selektiert den Block.
   CSS statt JS-Listener, weil Gutenberg das Canvas-Dokument per
   document.open() neu schreibt und dabei alle Dokument-Listener
   entsorgt. */
.editor-styles-wrapper a[href],
.editor-styles-wrapper form,
.editor-styles-wrapper button[type="submit"],
.editor-styles-wrapper video {
    pointer-events:none;
}

.editor-styles-wrapper .tile {
    min-height:405px;
    padding:40px 60px 52px 60px;
}
.editor-styles-wrapper .ph-grid .tile {
    min-height:0;
}
.editor-styles-wrapper .tile-plus {
    display:block;
}
.editor-styles-wrapper .tile-text {
    display:block;
}
.editor-styles-wrapper .ph-grid .tile-text {
    display:block; /* schlaegt die spaetere max-height-Ausblenderegel (Spezifitaet) */
    font-size:25px; /* statt vw/vh-clamp — iframe-Masse sind nicht der Viewport */
}
.editor-styles-wrapper .ph-color {
    padding:110px var(--pad-x) 95px;
}

/* Abstaende wie im Frontend: der Editor verpackt jede Sektion in einen
   Block-Wrapper — :first-child-Logik und Margin-Collapse aus dem
   Frontend greifen dort nicht. Der Wrapper uebernimmt den Sektionsabstand. */
.editor-styles-wrapper .is-root-container > .wp-block {
    margin-top:var(--section-gap);
    margin-bottom:0;
}
.editor-styles-wrapper .is-root-container > .wp-block:first-child,
.editor-styles-wrapper .is-root-container > .wp-block-post-title + .wp-block {
    margin-top:0;
}
.editor-styles-wrapper .page-header {
    margin-bottom:0;
}

/* Seitentitel: gehoert nicht zum Sitebuilder-Flow (Frontend-h1 kommt aus
   dem Kopfbereich) — als internes Verwaltungsfeld abgesetzt: UI-Schrift,
   gedaempft, Seitenrand wie die Bloecke, Trennlinie zum Canvas. */
.editor-styles-wrapper .wp-block-post-title {
    font-family:var(--f-ui);
    font-size:42px; /* deutlich groesser als der Fliesstext (28px), aber
                       via UI-Schrift/Grau klar als internes Feld markiert */
    font-weight:500;
    line-height:1.25;
    color:#6b6b6b;
    padding:28px var(--pad-x) 22px;
    margin-bottom:36px;
    border-bottom:1px solid #d8d8d8;
    max-width:none;
}
.editor-styles-wrapper .wp-block-post-title::before {
    content:'Seitentitel (intern, Menü & Suche — das h1 der Seite liefert der Kopfbereich)';
    display:block;
    font-family:var(--f-ui);
    font-size:11px;
    font-weight:400;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#9a9a9a;
    margin-bottom:10px;
}

/* ==========================================================================
   12. Media Queries (gesammelt, absteigend)
   ========================================================================== */

@media only screen and (max-width:1200px) {
    :root {
        --fs-hero-serif:70px;
        --fs-image-title:70px;
        --fs-tile-title:72px;
        --fs-h2:40px;
        --fs-menu:42px;
        --fs-wortmarke:72px;
        --fs-termine:34px;
        --pad-x:40px;
        --section-gap:110px;
    }
    .tile {
        min-height:330px;
        padding:30px 40px 34px;
    }
}

@media only screen and (max-width:1023px) {
    .no-hero #sitebuilder > .sb-item:first-child,
    .no-hero #sitebuilder > .screen-reader-text + .sb-item {
        padding-top:140px;
    }
    :root {
        --fs-hero-serif:55px;
        --fs-image-title:55px;
        --fs-tile-title:56px;
        --fs-tile-title-s:38px;
        --fs-h2:30px;
        --fs-h3:28px;
        --fs-body-l:28px;
        --fs-body:22px;
        --fs-copy:22px;
        --lh-copy:30px;
        --fs-termine:26px;
        --fs-menu:38px;
        --fs-wortmarke:56px;
        --fs-btn:20px;
        --pill-h:56px;
        --section-gap:90px;
    }
    .footer-top {
        flex-direction:column;
    }
    .footer-news {
        max-width:100%;
        padding-top:0;
    }
    .tile {
        min-height:280px;
        padding:26px 30px;
    }
    .tile-plus {
        width:34px;
        height:34px;
        top:20px;
        left:20px;
    }
    .ph-color {
        padding:90px var(--pad-x) 70px;
    }
    .ph-color .ph-visual img,
    .tile-brand .ph-visual img {
        max-height:130px;
    }
    .ph-color .ph-visual.is-wappen img {
        height:auto;
        max-height:220px;
    }
}

@media only screen and (max-width:767px) {
    .no-hero #sitebuilder > .sb-item:first-child,
    .no-hero #sitebuilder > .screen-reader-text + .sb-item {
        padding-top:110px;
    }
    :root {
        --fs-hero-serif:40px;
        --fs-image-title:40px;
        --fs-tile-title:44px;
        --fs-tile-title-s:32px;
        --fs-h2:24px;
        --fs-h3:20px;
        --fs-body-l:18px;
        --fs-body:16px;
        --fs-copy:24px;
        --lh-copy:28px;
        --fs-termine:16px;
        --fs-menu:32px;
        --fs-wortmarke:30px;
        --fs-btn:16px;
        --fs-btn-s:14px;
        --fs-small:14px;
        --fs-legal:11px;
        --pill-h:48px;
        --pill-h-s:34px;
        --pad-x:20px;
        --section-gap:var(--section-gap-mob);
    }
    #burger {
        top:30px;
        width:44px;
        height:26px;
    }
    .menu-open #burger span:nth-child(1) {
        transform:translateY(9.5px) rotate(45deg);
    }
    .menu-open #burger span:nth-child(3) {
        transform:translateY(-9.5px) rotate(-45deg);
    }
    #overlay-actions {
        flex-direction:column;
        align-items:flex-start;
    }
    #overlay .inner {
        padding-top:90px;
    }
    .page-header {
        margin-bottom:var(--section-gap-mob);
    }
    .ph-grid {
        grid-template-columns:1fr;
    }
    .tile {
        min-height:0;
        padding:34px 20px;
        justify-content:center;
    }
    .tile-text {
        display:none;
    }
    /* Plus bleibt mobil sichtbar; Kacheln teilen sich die
       100svh WIRKLICH gleichmaessig — minmax(0,1fr) verhindert, dass die
       Wappen-Kachel per min-content alle Reihen aufblaeht (bei 4 Kacheln
       = je 25svh). Wappen-Kachel ohne Titel, alle anderen Titel
       hoehenzentriert (justify-content:center der Basis). */
    .ph-grid {
        grid-auto-rows:minmax(0, 1fr);
    }
    .ph-grid .tile {
        overflow:hidden;
    }
    /* Titel nur visuell verstecken — als einziger Textinhalt ist er
       der zugaengliche Name des Kachel-Links */
    .tile-brand .tile-title {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%);
        white-space:nowrap;
        margin:0;
    }
    .tile-brand .ph-visual img {
        margin-bottom:0;
    }
    .tile-plus {
        display:block;
        width:28px;
        height:28px;
        top:16px;
        left:16px;
    }
    .tile-title {
        /* auto-Margins beidseitig: zentriert den Titel in der Kachel
           (margin-top:0 drueckte ihn wegen margin-bottom:auto der Basis
           nach oben) */
        margin-top:auto;
    }
    .tile-brand {
        padding:44px 20px;
    }
    .tile-brand .ph-visual img {
        max-height:110px;
    }
    .ph-color {
        padding:100px var(--pad-x) 60px;
    }
    .ph-color .ph-visual img {
        max-height:96px;
    }
    .ph-color .ph-visual.is-wappen img {
        max-height:150px;
    }
    .ph-image .ph-title {
        padding-top:40px;
    }
    #footer .inner {
        padding-top:44px;
    }
    .footer-brand {
        grid-template-columns:auto;
        grid-template-areas:
            "wm"
            "pills";
        justify-content:center;
        row-gap:24px;
        justify-items:center;
    }
    .footer-actions {
        flex-direction:column;
        align-items:center;
        gap:12px;
    }
    .footer-actions .btn {
        min-width:150px;
    }
    .footer-top {
        align-items:center;
    }
    .footer-news {
        width:100%;
        text-align:center;
        margin-top:20px;
    }
    .footer-news-form {
        gap:12px;
    }
    .footer-bottom {
        margin-top:36px;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }
}

/* Kachelgrid: Kacheltext ausblenden, sobald er zu klein wuerde
   (Viewport-Hoehe drueckt die 100vh-Kacheln zusammen; mobil ist er
   ohnehin ausgeblendet) */
@media only screen and (max-height:620px) {
    .ph-grid .tile-text {
        display:none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-wipe {
        display:none;
    }
    #overlay,
    .menu-open #overlay,
    .menu-closing #overlay {
        transition:none;
    }
    html {
        scroll-behavior:auto;
    }
}

/* Hero-Flaechen: Titel hat auf jeder Seite mind. 32px Abstand.
   Steht bewusst NACH den Media-Queries — deren padding-Shorthands
   wuerden die Seitenwerte sonst zuruecksetzen. */
.ph-color {
    padding-left:max(32px, var(--pad-x));
    padding-right:max(32px, var(--pad-x));
}

/* ==========================================================================
   Touch-Geraete: saemtliche Hover-Effekte neutralisieren —
   klebrige Tap-Hover irritieren. !important, weil Block-CSS nach
   diesem Stylesheet laedt.
   ========================================================================== */
@media (hover: none) {
    /* Touch-Geraete: theme.js setzt den Fokus beim Oeffnen des
       Menues auf den ersten Punkt und beim Schliessen auf den Burger/×
       (Tastatur-Bedienbarkeit) — iOS Safari zeichnet fuer programmatischen
       Fokus den :focus-visible-Ring. Ohne Tastatur ist der Ring dort
       nur Stoerung; auf Desktop/Tastatur bleibt er erhalten. */
    #overlay-menu a:focus-visible,
    #overlay-actions .btn:focus-visible,
    #burger:focus-visible,
    .objekt-close:focus-visible {
        outline:none;
    }
    .btn-black:hover {
        background:var(--c-black) !important;
        color:var(--c-white) !important;
        box-shadow:none !important;
    }
    .btn-green:hover {
        background:var(--c-green) !important;
        color:var(--c-black) !important;
    }
    .btn-outline:hover {
        background:var(--c-white) !important;
        color:var(--c-black) !important;
    }
    a.tile:hover .tt-r { opacity:1 !important; }
    a.tile:hover .tt-i { opacity:0 !important; }
    a.tile:hover .tile-text { transform:none !important; }
    a.tile-brand:hover .ph-visual img { transform:none !important; }
    .objekt-close:hover { transform:none !important; }
    #overlay-menu li a:hover {
        transform:none !important;
        padding-left:0 !important;
    }
    .text a:hover,
    .footer-legal a:hover,
    .objekt-file-download:hover,
    .sb-iconliste-text a:hover,
    .sb-login-form .sb-auth-alt a:hover,
    .sb-registrierung .sb-auth-alt a:hover,
    .sb-termine-row[href]:hover {
        color:inherit !important;
        background:inherit !important;
    }
    .sb-bildslider-slide.is-side:hover img { transform:none !important; }
    .sb-voting-card-media:hover .sb-voting-card-overlay {
        opacity:0 !important;
        transform:translateY(18px) !important;
    }
    .sb-objekt-upload-file::file-selector-button:hover {
        background:var(--c-black) !important;
        color:var(--c-white) !important;
    }
}