/* InSilentio: front end only (dark mode, header behaviour, grain, entrance motion). */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wp-site-blocks > * { margin-block-start: 0; }
.insil-front-content > * { margin-block: 0 !important; }
/* Header: solid and sticky on inner pages, transparent over the hero on the front page. */
.insil-site-header {
position: sticky;
top: 0;
z-index: 60;
color: var(--wp--preset--color--heading);
background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--wp--preset--color--line);
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.admin-bar .insil-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .insil-site-header { top: 46px; } }
.has-insil-hero .insil-site-header {
position: fixed;
left: 0;
right: 0;
color: var(--wp--preset--color--on-image);
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
}
.has-insil-hero .insil-site-header.is-solid {
color: var(--wp--preset--color--heading);
background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--wp--preset--color--line);
}
.insil-header__row { min-height: 72px; }
.insil-site-header .wp-block-site-title a { color: inherit; text-decoration: none; }
.insil-nav .wp-block-navigation__container { gap: 40px; }
.insil-nav .wp-block-navigation-item__content {
position: relative;
padding-block: 6px;
text-decoration: none;
opacity: 0.9;
}
.insil-nav .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--wp--preset--color--spark);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.insil-nav .wp-block-navigation-item__content:hover { opacity: 1; }
.insil-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
.insil-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--esperanto);
font-size: clamp(1.6rem, 7vw, 2.4rem);
line-height: 1.15;
letter-spacing: -0.02em;
text-transform: uppercase;
}
/* Film grain on a fixed layer, never on scrolling containers. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* Hero entrance: runs once and ends visible. */
@media (prefers-reduced-motion: no-preference) {
.insil-hero .wp-block-cover__inner-container > * { animation: insil-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.insil-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.12s; }
.insil-hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.24s; }
.insil-hero .wp-block-cover__image-background { animation: insil-settle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes insil-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes insil-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Testimonial arrows (injected by insilentio.js). */
.insil-quotes-head { align-items: flex-end !important; }
.insil-arrows { display: flex; gap: 10px; }
.insil-arrow {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--wp--preset--color--gold-line);
background: transparent;
color: var(--wp--preset--color--heading);
display: grid;
place-items: center;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.insil-arrow:hover:not(:disabled) { background: var(--wp--preset--color--heading); color: var(--wp--preset--color--base); }
.insil-arrow:disabled { opacity: 0.35; cursor: default; }
.insil-arrow:focus-visible { outline: 2px solid var(--wp--preset--color--spark); outline-offset: 3px; }
/* Dark mode: the palette tokens swap, every block follows. */
@media (prefers-color-scheme: dark) {
:root:root,
:root body {
color-scheme: dark;
--wp--preset--color--base: #060e1a;
--wp--preset--color--surface: #0f1b2e;
--wp--preset--color--line: #1e2c43;
--wp--preset--color--gold-line: #5e4d36;
--wp--preset--color--ink: #e8ddcb;
--wp--preset--color--muted: #bdb3a3;
--wp--preset--color--heading: #faefdd;
--wp--preset--color--gold: #cfae7c;
--wp--preset--color--spark: #cfae7c;
--wp--preset--color--spark-ink: #0c1626;
--wp--preset--color--night: #02060c;
}
body::after { mix-blend-mode: soft-light; opacity: 0.08; }
.wp-block-image.is-style-insil-oval img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
}
/* Title hover (insilentio.js): the hovered line spreads; the way home with its echoes is animated in the script. */
.insil-sr {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.is-split .insil-ch,
.is-split .insil-tag { position: relative; left: 0; }
.is-split .is-out { transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
/* Handwritten notes (inc/notes.php): red pen pointers in the margins, wide screens only. */
@font-face {
font-family: "Suomi Hand";
src: url("../fonts/suomihand-script.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: block;
}
:root {
--insil-note: #7a1f2e;
--insil-note-on-image: #c95566;
}
#angebote,
.insil-quotes-head { position: relative; }
.insil-note {
position: absolute;
z-index: 2;
margin: 0 !important;
max-width: none !important;
pointer-events: none;
color: var(--insil-note);
font-family: "Suomi Hand", "Segoe Print", cursive;
font-size: clamp(2.1rem, 3.2vw, 3.1rem);
font-weight: 400;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
transform: rotate(var(--insil-tilt, -5deg));
transform-origin: left center;
}
.wp-block-cover > .insil-note { color: var(--insil-note-on-image); }
.insil-note__text { display: block; }
.insil-note__arrow {
position: absolute;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Hero: a round wine-red scroll button in the bottom right corner, with the "Uebersicht" note above it. */
.insil-jump {
position: absolute;
z-index: 2;
right: clamp(20px, 2.4vw, 36px);
bottom: clamp(20px, 3.2vh, 36px);
margin: 0 !important;
}
.insil-jump__btn {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: #5e1626;
color: var(--wp--preset--color--on-image);
text-decoration: none;
box-shadow: 0 10px 24px -12px rgba(6, 14, 26, 0.6);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.insil-jump__btn svg { transition: transform 0.35s ease; }
.insil-jump__btn:hover { background: #761c2e; }
.insil-jump__btn:hover svg { transform: translateY(3px); }
.insil-jump__btn:active { transform: scale(0.96); }
.insil-jump__btn:focus-visible { outline: 2px solid var(--wp--preset--color--on-image); outline-offset: 3px; }
.insil-note--uebersicht { right: 0; bottom: calc(100% + 2em); --insil-tilt: -6deg; transform-origin: right center; }
.insil-note--uebersicht .insil-note__arrow { left: 65%; top: 108%; width: 0.6em; height: 1.8em; }
.insil-note--angebote {
left: calc(max(var(--wp--style--root--padding-left, 40px), (100% - var(--wp--style--global--content-size, 1280px)) / 2) + 3%);
top: calc(var(--insil-section) + 10.5vw);
--insil-tilt: -6deg;
}
.insil-note--angebote .insil-note__arrow { left: calc(100% + 0.2em); top: 40%; width: 3.3em; height: 3.7em; }
.insil-note--mehr { right: 20px; top: -58px; --insil-tilt: -4deg; }
.insil-note--mehr .insil-note__arrow { left: 20%; top: 95%; width: 1.3em; height: 2.4em; }
.insil-note--kontakt { left: max(78px, calc(50% - 570px)); top: 40%; --insil-tilt: -8deg; }
.insil-note--kontakt .insil-note__arrow { left: calc(100% + 0.15em); top: -10%; width: 3.3em; height: 1.5em; }
@media (max-width: 1179px) {
.insil-note--kontakt { display: none; }
}
@media (max-width: 959px) {
.insil-note,
.insil-jump { display: none; }
}
@media print {
.insil-note,
.insil-jump { display: none; }
}
@media (prefers-color-scheme: dark) {
:root { --insil-note: #c95566; }
}
/* Page chrome (inc/chrome.php): side rails and menu page. */
/* Pinel: the menu face (menu page, rails, menu button), always in capitals. */
@font-face {
font-family: "Pinel";
src: url("../fonts/pinel.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--insil-rail: 34px;
--insil-rail-gap: 12px;
}
/* Chapter curtains (insilentio.js): the opening photo fills the first screen and holds still while the next chapter rises over it. */
:root { --insil-lip: min(22vh, 240px); }
.wp-block-cover.insil-hero,
.wp-block-cover.insil-subhero { position: sticky; top: 0; z-index: 0; }
.insil-hero ~ *,
.insil-subhero ~ * { position: relative; z-index: 1; }
.insil-hero ~ :not(.wp-block-cover),
.insil-subhero ~ :not(.wp-block-cover) { background-color: var(--wp--preset--color--base); }
.insil-hero .wp-block-cover__inner-container { padding-bottom: clamp(48px, 8vh, 88px); }
.insil-subhero .wp-block-cover__inner-container { padding-bottom: clamp(24px, 5vh, 56px); }
.wp-block-cover.insil-band { padding-top: clamp(64px, 8vw, 96px) !important; }
.wp-block-cover.insil-contact { padding-top: clamp(56px, 7vw, 96px) !important; }
/* The rising edge: a plucked string, with fine lines tracing the reach of its swing. */
.insil-lip {
position: absolute;
left: 0;
right: 0;
height: var(--insil-lip);
margin: 0 !important;
max-width: none !important;
pointer-events: none;
line-height: 0;
}
.insil-lip svg { display: block; width: 100%; height: 100%; }
.insil-lip__sheet { fill: var(--wp--preset--color--base); }
.insil-lip__strings { fill: none; stroke-width: 1; }
.insil-lip__strings--light { stroke: var(--wp--preset--color--on-image); stroke-opacity: 0.55; }
.insil-lip__strings--dark { stroke: var(--wp--preset--color--heading); stroke-opacity: 0.35; }
.insil-rise--sheet > .insil-lip { bottom: calc(100% - 1px); }
/* Photo chapters reach up over the cream by the height of the wave; at rest the photo is cut straight where it always began. */
.insil-rise--photo > .insil-lip { top: 0; z-index: 1; }
.wp-block-cover.insil-rise--photo {
margin-top: calc(-1 * var(--insil-lip)) !important;
pointer-events: none;
}
.wp-block-cover.insil-band.insil-rise--photo {
padding-top: calc(clamp(64px, 8vw, 96px) + var(--insil-lip)) !important;
min-height: calc(clamp(600px, 84vh, 760px) + var(--insil-lip)) !important;
}
.wp-block-cover.insil-contact.insil-rise--photo {
padding-top: calc(clamp(56px, 7vw, 96px) + var(--insil-lip)) !important;
scroll-margin-top: calc(-1 * var(--insil-lip));
}
.insil-rise--photo > .wp-block-cover__inner-container { pointer-events: auto; z-index: 2; }
.insil-rise--photo > .wp-block-cover__image-background,
.insil-rise--photo > .wp-block-cover__background { clip-path: inset(var(--insil-lip) 0 0 0); }
/* Dark until the photo has loaded, so the pinned hero never shows through. */
.insil-rise--photo > .wp-block-cover__image-background { background-color: var(--wp--preset--color--night); }
.insil-contact.insil-rise--photo > .insil-note--kontakt { top: calc(40% + 0.6 * var(--insil-lip)); }
@media print {
.insil-lip { display: none; }
}
/* Side rails: desktop only, they replace the top bar. */
.insil-rail { display: none; }
.insil-rail__item {
writing-mode: vertical-rl;
transform: rotate(180deg);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px 0;
border: 0;
background: none;
color: inherit;
font-family: "Pinel", Georgia, serif;
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
span.insil-rail__item { cursor: default; }
.insil-rail__item:hover { color: var(--wp--preset--color--on-image); }
.insil-rail__item:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.insil-notes-toggle span {
display: inline-block;
padding: 5px 1px;
border: 1px solid transparent;
border-radius: 999px;
letter-spacing: 0.12em;
}
.insil-notes-toggle[aria-pressed="true"] .insil-notes-toggle__on,
.insil-notes-toggle[aria-pressed="false"] .insil-notes-toggle__off { border-color: currentColor; }
.insil-menu-toggle__close { display: none; }
.insil-menu-open .insil-menu-toggle__open { display: none; }
.insil-menu-open .insil-menu-toggle__close { display: inline; }
@media (min-width: 960px) {
.insil-rail {
position: fixed;
top: var(--insil-rail-gap);
bottom: var(--insil-rail-gap);
z-index: 95;
width: var(--insil-rail);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 24px 0;
background: var(--wp--preset--color--night);
color: rgba(250, 239, 221, 0.8);
}
.admin-bar .insil-rail { top: calc(32px + var(--insil-rail-gap)); }
/* The rails float over the full-width page, a little in from the edges; text keeps clear of them. */
.insil-rail--left { left: var(--insil-rail-gap); }
.insil-rail--right { right: var(--insil-rail-gap); }
html body {
--wp--style--root--padding-left: calc(var(--insil-rail) + 2 * var(--insil-rail-gap));
--wp--style--root--padding-right: calc(var(--insil-rail) + 2 * var(--insil-rail-gap));
}
.insil-jump { right: calc(var(--insil-rail) + 2 * var(--insil-rail-gap) + 8px); }
/* Full-width photo chapters keep their text clear of the rails too. */
html body .wp-block-cover.alignfull {
padding-left: calc(var(--insil-rail) + 2 * var(--insil-rail-gap));
padding-right: calc(var(--insil-rail) + 2 * var(--insil-rail-gap));
}
.insil-site-header { display: none !important; }
html { scroll-padding-top: 24px; }
}
/* Top bar on small screens: the links become one menu button. */
.insil-head-menu {
padding: 8px 0;
border: 0;
background: none;
color: inherit;
font-family: "Pinel", Georgia, serif;
font-size: 14px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
}
/* Handwritten notes can be switched off from the rail. */
.insil-note { transition: opacity 0.4s ease, visibility 0.4s ease; }
.insil-notes-off .insil-note,
.insil-notes-off .insil-menu__note { opacity: 0; visibility: hidden; }
/* Menu page */
.insil-menu-open { overflow: hidden; }
.insil-menu {
position: fixed;
inset: 0;
z-index: 88;
display: flex;
flex-direction: column;
padding: 0 20px;
overflow-y: auto;
background: var(--wp--preset--color--night);
color: var(--wp--preset--color--on-image);
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.insil-menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s; }
.admin-bar .insil-menu { top: 32px; }
.insil-menu__nav { flex: 1; display: flex; align-items: center; padding: 72px 0 32px; }
.insil-menu__list { width: 100%; margin: 0; padding: 0; list-style: none; }
.insil-menu__row {
position: relative;
margin: 0;
padding: 0.14em 0 0.1em;
border-top: 1px solid rgba(250, 239, 221, 0.12);
text-align: center;
font-family: "Pinel", Georgia, serif;
/* As large as the screen allows: capped by the height too, so all four rows always fit. */
font-size: clamp(2.9rem, min(10vw, 17vh), 11rem);
line-height: 0.95;
letter-spacing: 0.005em;
font-feature-settings: "case" 1;
text-transform: uppercase;
}
.insil-menu__row:last-child { border-bottom: 1px solid rgba(250, 239, 221, 0.12); }
.insil-menu__link { position: relative; display: inline-block; color: inherit; text-decoration: none; }
.insil-menu__link:focus-visible { outline: 1px solid rgba(250, 239, 221, 0.6); outline-offset: 6px; }
.insil-menu__num {
margin-right: 0.5em;
font-size: 0.2em;
line-height: 0;
letter-spacing: 0;
vertical-align: 2.6em;
color: rgba(250, 239, 221, 0.7);
}
.insil-menu__scribble {
position: absolute;
left: -4%;
top: 36%;
width: 108%;
height: 0.42em;
overflow: visible;
pointer-events: none;
fill: none;
stroke: #c95566;
stroke-width: 1.3;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
opacity: 0;
transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.insil-menu__link:hover .insil-menu__scribble,
.insil-menu__link:focus-visible .insil-menu__scribble { stroke-dashoffset: 0; opacity: 1; }
.insil-menu__note {
position: absolute;
font-family: "Suomi Hand", "Segoe Print", cursive;
font-size: clamp(1.7rem, 2.6vw, 2.7rem);
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
color: #c95566;
pointer-events: none;
transform: rotate(-6deg);
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.insil-menu__note--1 { left: 86%; top: -38%; }
.insil-menu__note--2 { right: 104%; top: 4%; }
.insil-menu__note--3 { left: 102%; top: 58%; }
.insil-menu__note--4 { left: 42%; top: 96%; }
.insil-menu__foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 32px;
padding: 0 0 28px;
font-family: "Pinel", Georgia, serif;
font-size: clamp(14px, 1.25vw, 18px);
letter-spacing: 0.16em;
text-transform: uppercase;
font-feature-settings: "case" 1;
color: rgba(250, 239, 221, 0.8);
}
.insil-menu__foot a { color: inherit; text-decoration: none; }
.insil-menu__foot a:hover { color: var(--wp--preset--color--on-image); text-decoration: underline; }
@media (min-width: 960px) {
.insil-menu { padding: 0 calc(var(--insil-rail) + 6vw); }
}
/* Small screens: the top bar (with "Schließen") stays above the open menu. */
.insil-menu-open .insil-site-header,
.insil-menu-open.has-insil-hero .insil-site-header.is-solid,
.insil-menu-open .has-insil-hero .insil-site-header.is-solid {
z-index: 96;
color: var(--wp--preset--color--on-image);
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@media (max-width: 699px) {
.insil-menu__note { display: none; }
.insil-menu__num { font-size: 0.3em; vertical-align: 1.5em; }
.insil-menu__foot { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
.insil-menu__row { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.insil-menu.is-open .insil-menu__row { opacity: 1; transform: none; }
.insil-menu.is-open .insil-menu__row:nth-child(2) { transition-delay: 0.06s; }
.insil-menu.is-open .insil-menu__row:nth-child(3) { transition-delay: 0.12s; }
.insil-menu.is-open .insil-menu__row:nth-child(4) { transition-delay: 0.18s; }
}
@media print {
.insil-rail,
.insil-menu { display: none; }
}
/*
* Phone and tablet (below 960px, where the rails give way to the top bar): proportions
* after mariavasilyeva.com on a phone. Display capitals are sized to the screen width,
* as large as the longest German word allows (ERSCHÖPFUNG, MITGLIEDSCHAFT), and capped
* by the screen height for landscape phones; tight side margins; a dark inset top bar.
*/
@media (max-width: 959px) {
html body {
--wp--style--root--padding-left: max(10px, 2.5vw);
--wp--style--root--padding-right: max(10px, 2.5vw);
}
html body .wp-block-cover.alignfull {
padding-left: max(10px, 2.5vw);
padding-right: max(10px, 2.5vw);
}
/*
* Type, on the reference's phone scale: display capitals (14vw) only for the opening
* statement and the photo chapters; section titles are small capitals between hairlines
* (5.1vw), like its (ABOUT) and (SERVICES) statements; leads in sentence case (5.1vw).
*/
main h1,
.insil-subhero h1 {
font-size: min(14vw, 16vh, 8rem);
line-height: 0.86;
}
main h2,
main .insil-head--center h2,
.insil-guide h2 {
max-width: none;
padding: 0.34em 0 0.24em;
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--gold-line) 55%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gold-line) 55%, transparent);
font-size: clamp(1.15rem, 5.1vw, 2rem);
line-height: 1.2;
letter-spacing: -0.02em;
}
main .insil-band h2,
main .insil-contact h2 {
max-width: 12em;
padding: 0;
border: 0;
font-size: min(14vw, 16vh, 8rem);
line-height: 0.86;
}
main h3,
.insil-pillars h3 {
font-size: clamp(1.1rem, 5.1vw, 1.9rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
/* Sized so the longest word fits, so no hyphens (legal pages keep theirs). */
main h1,
main h2,
main h3 { hyphens: manual; }
.insil-prose h2 { font-size: clamp(1.35rem, 6vw, 2rem); line-height: 1.05; }
.insil-prose h3 { font-size: clamp(1.1rem, 5vw, 1.5rem); line-height: 1.15; }
.insil-intro,
.insil-hero p,
.insil-band__lead,
.insil-contact__lead,
.insil-sublead {
font-size: clamp(1.15rem, 5.1vw, 1.9rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.insil-label,
.is-style-insil-offer p.insil-label { font-size: clamp(14px, 4vw, 19px); }
/* The testimonial head stacks: the headline gets the full width, the arrows sit below it. */
.insil-quotes-head { flex-wrap: wrap !important; row-gap: 20px; }
/* Top bar: a dark inset bar, like the rails on desktop. */
.insil-site-header,
.has-insil-hero .insil-site-header,
.has-insil-hero .insil-site-header.is-solid {
top: 8px;
margin: 8px 8px 0;
color: rgba(250, 239, 221, 0.9);
background: var(--wp--preset--color--night);
border: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.has-insil-hero .insil-site-header,
.has-insil-hero .insil-site-header.is-solid {
left: 8px;
right: 8px;
margin: 0;
}
.admin-bar .insil-site-header { top: 40px; }
.insil-site-header .insil-header { padding-left: 14px; padding-right: 14px; }
.insil-header__row { min-height: 0; padding-block: 12px; }
.insil-site-header .insil-logo,
.insil-head-menu {
margin: 0;
padding: 2px 0;
font-family: "Pinel", Georgia, serif;
font-size: clamp(14px, 4vw, 18px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.insil-site-header .insil-logo a { color: inherit; }
.insil-site-header .insil-logo a::before {
content: "";
display: inline-block;
width: 0.46em;
height: 0.52em;
margin-right: 0.7em;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Menu page: framed rows with room between them, numbers hanging to the left, notes around the words. */
.insil-menu { padding: 0 8px; }
.insil-menu__nav { padding: 72px 0 24px; }
.insil-menu__list { display: flex; flex-direction: column; gap: 5.4vw; }
.insil-menu__row,
.insil-menu__row:last-child {
padding: 0.05em 0 0;
font-size: min(14vw, 11vh, 8.5rem);
line-height: 0.92;
border-top: 1px solid rgba(250, 239, 221, 0.16);
border-bottom: 1px solid rgba(250, 239, 221, 0.16);
}
.insil-menu__num {
position: absolute;
right: calc(100% + 0.18em);
top: 0.28em;
margin: 0;
font-size: 0.26em;
line-height: 1;
vertical-align: baseline;
}
/* BEGLEITUNG fills the width: nudge it right so its number still fits on the left. */
.insil-menu__row:nth-child(2) .insil-menu__link { left: 4vw; }
.insil-menu__note { display: block; font-size: clamp(1.3rem, 6vw, 2.4rem); }
.insil-menu__note--1 { left: 66%; top: -50%; }
.insil-menu__note--2 { right: auto; left: 60%; top: 84%; }
.insil-menu__note--3 { left: 104%; top: 36%; }
.insil-menu__note--4 { left: 44%; top: 94%; }
.insil-menu__foot { font-size: clamp(13px, 3.6vw, 16px); }
}
@media (max-width: 782px) {
.admin-bar .insil-site-header { top: 54px; }
}
/* Side rails: the writing fills the bar (about 58% of its width, like the reference), a little smaller on short screens so the two lines of a rail never meet. */
@media (min-width: 960px) {
.insil-rail__item { font-size: min(20px, 2.2vh); letter-spacing: 0.14em; gap: 0.6em; }
.insil-rail__item svg { width: 0.5em; height: 0.5em; }
.insil-notes-toggle span { padding: 0.3em 0.05em; }
}
/*
* Breathing room: more space between the chapters and inside them. --insil-section sets
* every chapter's padding (the "Angebote" note follows it, since it sits by the heading).
*/
:root {
--insil-section: clamp(88px, 11vw, 168px);
--insil-inner: clamp(44px, 4.6vw, 76px);
--insil-gap: clamp(20px, 1.7vw, 28px);
}
.insil-front-content > .wp-block-group.alignfull {
padding-top: var(--insil-section) !important;
padding-bottom: var(--insil-section) !important;
}
/* Two cream chapters in a row share one gap, not two. */
.insil-front-content > .wp-block-group.alignfull[style*="padding-top:0"] { padding-top: 0 !important; }
.wp-block-cover.insil-band,
.wp-block-cover.insil-contact { padding-top: var(--insil-section) !important; }
.wp-block-cover.insil-band.insil-rise--photo,
.wp-block-cover.insil-contact.insil-rise--photo { padding-top: calc(var(--insil-section) + var(--insil-lip)) !important; }
.wp-block-cover.insil-band { padding-bottom: clamp(56px, 5.5vw, 88px) !important; }
.wp-block-cover.insil-contact { padding-bottom: var(--insil-section) !important; }
/* Heading to lead, and heading block to what follows it. */
.insil-head > * + *,
.insil-band h2 + p,
.insil-contact h2 + p { margin-top: clamp(22px, 2.2vw, 34px); }
.insil-front-content .insil-head + *,
.insil-front-content .insil-quotes-head + * { margin-top: var(--insil-inner) !important; }
.insil-form { margin-top: var(--insil-inner); }
/* Cards: rows and columns keep the same spacing. */
.insil-offers > * + * { margin-top: var(--insil-gap) !important; }
.insil-offers .wp-block-columns,
.insil-prices,
.insil-track { gap: var(--insil-gap) !important; }
.insil-offers .wp-block-columns { row-gap: var(--insil-gap) !important; }
/*
* Entwurf v3: offer cards and groups, price list, offer pages (facts, request, related),
* contact with three steps, "Mehr erfahren" links, sub pages, and the notes as wayfinders.
*/
.insil-offen { padding: 0 0.2em; border-radius: 3px; background: rgba(240, 197, 142, 0.35); }
/* Hero: the centre line in the display face, right under the headline. */
.insil-hero .insil-hero__zentrum {
max-width: 28ch;
margin-inline: auto;
font-family: var(--wp--preset--font-family--esperanto);
font-size: clamp(1.3rem, 2.2vw, 2.1rem);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--insil-meta);
text-wrap: balance;
}
.insil-hero__cta { position: relative; }
/* Offers: five groups, each a question with its label and its cards. */
.insil-angebote__titel { margin-bottom: 0; }
.insil-groups { display: grid; gap: clamp(48px, 5vw, 84px); margin-top: var(--insil-inner); }
.insil-group__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 6px 20px;
margin-bottom: var(--insil-gap);
padding-bottom: 14px;
border-bottom: 1px solid var(--wp--preset--color--line);
}
main .insil-group__title { margin: 0; font-size: clamp(1.35rem, 2.1vw, 2rem); line-height: 1.05; }
.insil-group__label {
margin: 0;
font-family: var(--wp--preset--font-family--esperanto);
font-size: 13.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--gold);
}
.insil-group__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--insil-gap); }
@media (max-width: 1199px) { .insil-group__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .insil-group__cards { grid-template-columns: 1fr; } }
.insil-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--insil-r-card);
background: var(--wp--preset--color--surface);
color: var(--wp--preset--color--ink);
text-decoration: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.insil-card:hover { border-color: var(--wp--preset--color--gold-line); box-shadow: 0 22px 44px -32px rgba(19, 36, 61, 0.5); }
.insil-card:focus-visible { outline: 2px solid var(--wp--preset--color--spark); outline-offset: 3px; }
.insil-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--wp--preset--color--line); }
.insil-card__img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.insil-card:hover .insil-card__img { transform: scale(1.04); }
.insil-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.insil-card__name {
font-family: var(--wp--preset--font-family--esperanto);
font-size: 13.5px;
line-height: 1.3;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--wp--preset--color--gold);
}
.insil-card__title {
font-family: var(--wp--preset--font-family--esperanto);
font-size: clamp(1.25rem, 1.5vw, 1.5rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--wp--preset--color--heading);
}
.insil-card__more {
margin-top: auto;
padding-top: 12px;
font-size: 15.5px;
color: var(--wp--preset--color--heading);
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--gold-line);
text-underline-offset: 4px;
}
.insil-card:hover .insil-card__more { text-decoration-color: var(--wp--preset--color--gold); }
.insil-hilfe {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 18px;
margin: var(--insil-inner) 0 0;
text-align: center;
font-size: 18px;
}
.insil-hilfe a,
.insil-anfrage a {
color: var(--wp--preset--color--heading);
text-decoration-color: var(--wp--preset--color--gold-line);
text-underline-offset: 4px;
}
/* Prices: a quiet list, grouped like the offers; the names lead to the offer pages. */
.insil-preise__kopf { position: relative; }
.insil-preisliste {
columns: 2 320px;
column-gap: clamp(32px, 5vw, 88px);
margin-top: var(--insil-inner);
padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 44px) 4px;
border: 1px solid var(--wp--preset--color--line);
border-bottom: 0;
border-radius: var(--insil-r-card) var(--insil-r-card) 0 0;
background: var(--wp--preset--color--surface);
}
.insil-preisliste__gruppe { break-inside: avoid; margin-bottom: 30px; }
main .insil-preisliste__label {
margin: 0 0 4px;
padding: 0;
border: 0;
font-size: 13.5px;
line-height: 1.3;
letter-spacing: 0.1em;
color: var(--wp--preset--color--gold);
}
.insil-preisliste__rows { margin: 0; padding: 0; list-style: none; }
.insil-preisliste__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 18px;
padding: 11px 0;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.insil-preisliste__name {
color: var(--wp--preset--color--ink);
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--gold-line);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.insil-preisliste__name:hover { color: var(--wp--preset--color--heading); text-decoration-color: var(--wp--preset--color--gold); }
.insil-preisliste__preis { flex: none; max-width: 55%; text-align: right; color: var(--wp--preset--color--muted); font-variant-numeric: lining-nums; }
.insil-preisliste__fuss {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px 24px;
padding: 20px clamp(22px, 3vw, 44px) 24px;
border: 1px solid var(--wp--preset--color--line);
border-top: 0;
border-radius: 0 0 var(--insil-r-card) var(--insil-r-card);
background: var(--wp--preset--color--surface);
}
.insil-preisliste__fuss p { margin: 0; }
/* Offer pages: breadcrumbs and headline in the photo, then the facts, the text, the request, related offers. */
.insil-crumbs {
margin: 0 0 14px;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--insil-on-image-muted);
}
.insil-crumbs a { color: inherit; text-decoration-color: var(--insil-on-image-line); text-underline-offset: 4px; }
.insil-subhero h1.insil-angebot__name {
max-width: none;
font-size: min(clamp(2.3rem, 6.4vw, 5.75rem), calc((100vw - 170px) / var(--insil-fit, 8)));
}
.insil-subhero .insil-angebot__titel {
margin: 10px 0 0;
font-family: var(--wp--preset--font-family--esperanto);
font-size: clamp(1.35rem, 2.4vw, 2.2rem);
line-height: 1.1;
color: var(--insil-meta);
}
.insil-subhero .insil-sublead { margin-top: 6px; }
.insil-fakten {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
padding: 18px 22px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--insil-r-card);
background: var(--wp--preset--color--surface);
}
.insil-fakten__list { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 14px 0; margin: 0; }
.insil-fakten__item { padding: 0 24px; border-left: 1px solid var(--wp--preset--color--line); }
.insil-fakten__item:first-child { padding-left: 0; border-left: 0; }
.insil-fakten dt {
margin: 0 0 4px;
font-family: var(--wp--preset--font-family--esperanto);
font-size: 12.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--gold);
}
.insil-fakten dd { margin: 0; font-size: 17px; line-height: 1.4; color: var(--wp--preset--color--heading); }
.insil-fakten__cta { margin-left: auto; }
.insil-fakten__hinweis { max-width: 72ch; margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--wp--preset--color--muted); }
.is-layout-constrained > .insil-angebot__text { max-width: 68ch; margin-top: var(--insil-inner) !important; }
.insil-angebot__text > * { margin-block: 0; }
.insil-angebot__text > * + * { margin-top: 1.1em; }
.insil-angebot__text > h3 { margin-top: 2.2em; }
.insil-angebot__text .insil-label { margin-bottom: -0.4em; }
.insil-angebot__text .is-style-dots { margin-block: 2em; }
.insil-anfrage {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
margin-top: var(--insil-inner);
padding: 18px 22px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--insil-r-card);
background: var(--wp--preset--color--surface);
}
.insil-anfrage p { margin: 0; }
.insil-passt { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 28px; margin-top: var(--insil-gap); }
.insil-passt__label,
.insil-kontakt__info dt {
margin: 0;
font-family: var(--wp--preset--font-family--esperanto);
font-size: 12.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--gold);
}
.insil-passt__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--insil-gap); }
.insil-passt__link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 20px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--insil-r-card);
background: var(--wp--preset--color--surface);
color: var(--wp--preset--color--heading);
text-decoration: none;
transition: border-color 0.3s ease;
}
.insil-passt__link:hover { border-color: var(--wp--preset--color--gold-line); }
.insil-passt__name { font-size: 17px; }
.insil-passt__titel { font-size: 15.5px; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
.insil-fakten__item { padding: 0 18px 0 0; border-left: 0; }
.insil-fakten__cta { width: 100%; margin-left: 0; }
.insil-fakten__cta .wp-block-button__link { width: 100%; }
.insil-passt,
.insil-passt__links { grid-template-columns: 1fr; }
}
/* Contact: three steps, phone / e-mail / address beside a five-field form. */
.insil-kontakt { max-width: 1040px; margin: var(--insil-inner) auto 0; text-align: left; }
.insil-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 14px;
margin: 0 0 clamp(32px, 3.4vw, 52px);
padding: 0;
list-style: none;
font-size: 16.5px;
color: var(--insil-on-image-muted);
}
.insil-steps li { display: inline-flex; align-items: center; gap: 10px; }
.insil-steps li + li::before { content: "→"; margin-right: 4px; opacity: 0.6; }
.insil-steps__nr {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--wp--preset--color--spark);
color: var(--wp--preset--color--on-image);
font-size: 14px;
line-height: 1;
}
.insil-kontakt__grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.insil-kontakt__info { display: grid; gap: 22px; margin: 0; }
.insil-kontakt__info dt { margin-bottom: 4px; color: var(--insil-meta); }
.insil-kontakt__info dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--on-image); }
.insil-kontakt__info a { color: inherit; }
.insil-kontakt .insil-form { max-width: none; margin: 0; }
.insil-opt { opacity: 0.7; }
.insil-field--angebot { position: relative; }
.insil-check { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 16.5px; color: var(--insil-on-image-muted); }
.insil-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--wp--preset--color--spark); }
.insil-form__send { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.insil-kontakt .insil-form .wp-element-button { width: auto; padding-inline: 2em; }
.insil-form__privacy { margin: 0; font-size: 15px; line-height: 1.5; color: var(--insil-on-image-muted); }
.insil-form__privacy a { color: var(--wp--preset--color--on-image); }
.insil-field__error { margin: 2px 0 0; font-size: 14.5px; color: #f0c58e; }
.insil-field input[aria-invalid="true"] { border-color: #f0c58e; }
.insil-kontakt .insil-form-note { margin: 0; text-align: left; }
.insil-form-done {
padding: 28px 30px;
border: 1px solid var(--insil-on-image-line);
border-radius: var(--insil-r-card);
background: rgba(var(--insil-scrim), 0.5);
color: var(--wp--preset--color--on-image);
}
.insil-form-done:focus { outline: none; }
.insil-form-done p { margin: 0; }
.insil-form-done .insil-form-done__title { margin-bottom: 8px; font-family: var(--wp--preset--font-family--esperanto); font-size: 2rem; line-height: 1; }
@media (max-width: 781px) {
.insil-kontakt__grid { grid-template-columns: 1fr; }
.insil-kontakt__info { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
.insil-kontakt .insil-form .wp-element-button { width: 100%; }
.insil-steps { flex-direction: column; align-items: flex-start; }
.insil-steps li + li::before { content: none; }
}
/* "Mehr erfahren": plain links, one line each, the whole line tappable. */
.insil-front-content > .wp-block-group.alignfull.insil-mehr-wrap {
padding-top: clamp(64px, 7vw, 112px) !important;
padding-bottom: clamp(56px, 6vw, 96px) !important;
}
.insil-mehr { position: relative; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--line); }
.insil-mehr__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--insil-gap); margin: 0; padding: 0; list-style: none; }
.insil-mehr__link { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 10px 0; color: var(--wp--preset--color--heading); text-decoration: none; }
.insil-mehr__titel { font-size: 19px; }
.insil-mehr__link:hover .insil-mehr__titel { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 4px; }
.insil-mehr__text { font-size: 15.5px; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
.insil-mehr__list { grid-template-columns: 1fr; gap: 0; }
.insil-mehr__list li + li { border-top: 1px solid var(--wp--preset--color--line); }
.insil-mehr__link { padding: 14px 0; }
}
/* Sub pages: Wer Sie begleitet, Der Ort, Häufige Fragen. */
.insil-unterseite .insil-head { max-width: 920px; }
main .insil-unterseite h1 { margin: 0; font-size: var(--wp--preset--font-size--xx-large); line-height: 0.95; }
.insil-team,
.insil-ort { margin-top: var(--insil-inner) !important; gap: clamp(32px, 5vw, 80px) !important; }
.insil-team .wp-block-column > * { margin-block: 0; }
.insil-team .wp-block-column > * + * { margin-top: 14px; }
.insil-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--insil-r-card); }
.insil-platzhalter {
display: grid;
place-items: center;
aspect-ratio: 4 / 5;
padding: 24px;
border: 1px dashed var(--wp--preset--color--gold-line);
border-radius: var(--insil-r-card);
background: repeating-linear-gradient(135deg, var(--wp--preset--color--surface) 0 18px, var(--wp--preset--color--line) 18px 36px);
text-align: center;
}
.insil-platzhalter--quer { aspect-ratio: 4 / 3; }
.insil-platzhalter p { margin: 0; padding: 6px 10px; border-radius: 4px; background: var(--wp--preset--color--base); font-size: 15px; color: var(--wp--preset--color--muted); }
.insil-team h2.insil-team__name { margin-top: 28px; font-size: var(--wp--preset--font-size--x-large); line-height: 1.05; }
.insil-team__rolle { font-family: var(--wp--preset--font-family--esperanto); font-size: 1.25rem; color: var(--wp--preset--color--gold); }
.insil-team .insil-team__rolle { margin-top: 8px; }
.insil-team .insil-team__meta { margin-top: 4px; font-size: 15.5px; color: var(--wp--preset--color--muted); }
.insil-team ul { padding-left: 1.1em; }
.insil-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
margin-top: var(--insil-inner) !important;
padding: 18px 22px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--insil-r-card);
background: var(--wp--preset--color--surface);
}
.insil-cta-row > * { margin: 0 !important; }
.insil-cta-row a:not(.wp-element-button) { color: var(--wp--preset--color--heading); text-decoration-color: var(--wp--preset--color--gold-line); text-underline-offset: 4px; }
.insil-ort-fakten { margin: 28px 0 0; padding: 0; list-style: none; }
.insil-ort-fakten li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.insil-faq { max-width: 820px; margin-top: var(--insil-inner) !important; border-top: 1px solid var(--wp--preset--color--line); }
.insil-faq .wp-block-details { margin: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.insil-faq summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
min-height: 44px;
padding: 18px 0;
font-size: 19px;
color: var(--wp--preset--color--heading);
cursor: pointer;
list-style: none;
}
.insil-faq summary::-webkit-details-marker { display: none; }
.insil-faq summary::after { content: "+"; flex: none; font-size: 26px; line-height: 1; color: var(--wp--preset--color--gold); transition: transform 0.3s ease; }
.insil-faq details[open] > summary::after { transform: rotate(45deg); }
.insil-faq summary:focus-visible { outline: 2px solid var(--wp--preset--color--spark); outline-offset: 4px; }
.insil-faq .wp-block-details > p { max-width: 70ch; margin: 0 0 22px; }
/* Notes as wayfinders: smaller than the margin notes before, arrow set beside the words. */
.insil-note[class*="insil-note--"] { display: inline-flex; align-items: center; gap: 0.25em; }
span.insil-note { font-size: clamp(1.45rem, 1.9vw, 1.95rem); }
.wp-block-cover .insil-note { color: var(--insil-note-on-image); }
span.insil-note .insil-note__arrow { position: static; flex: none; width: auto; height: 1.3em; }
.insil-note--links .insil-note__arrow { height: 0.75em; }
.insil-note--unten .insil-note__arrow { height: 1.6em; }
.insil-note--links .insil-note__arrow,
.insil-note--oben-links .insil-note__arrow,
.insil-note--unten-links .insil-note__arrow { order: -1; }
.insil-js .insil-note__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.insil-js .insil-note.is-drawn .insil-note__arrow path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s cubic-bezier(0.3, 0.6, 0.3, 1) 0.2s; }
.insil-js .insil-note.is-drawn .insil-note__arrow path + path { transition-duration: 0.3s; transition-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
.insil-js .insil-note__arrow path { stroke-dashoffset: 0; transition: none !important; }
}
.insil-note--kostenlos { left: calc(50% + 150px); top: 50%; --insil-tilt: -4deg; transform: translateY(-55%) rotate(var(--insil-tilt)); }
.insil-jump .insil-note--uebersicht { right: 34px; bottom: calc(100% + 2px); left: auto; top: auto; --insil-tilt: -6deg; }
.insil-note--schnuppern,
.insil-hilfe .insil-note--beraten,
.insil-check .insil-note--rueckruf { position: static; }
.insil-note--schnuppern { align-self: center; justify-self: start; --insil-tilt: -3deg; }
.insil-note--ohne-abo { right: max(0px, calc(50% - 460px)); bottom: -0.55em; --insil-tilt: -5deg; }
.insil-note--ausgewaehlt { right: 0; top: -1.7em; font-size: clamp(1.3rem, 1.6vw, 1.6rem); --insil-tilt: -3deg; transform-origin: right center; }
.insil-note--wissen { left: 0; top: -2.2em; --insil-tilt: -4deg; }
.insil-note--blick { right: 20px; top: -2em; --insil-tilt: -4deg; transform-origin: right center; }
@media (max-width: 959px) {
/* Phones: only four notes, set right above their element instead of in the margin. */
.insil-note.insil-note--m { display: inline-flex; position: static; font-size: 1.45rem; --insil-tilt: -3deg; }
.insil-hero__cta .insil-note--kostenlos,
.insil-preise__kopf .insil-note--ohne-abo,
.insil-hilfe .insil-note--beraten { order: -1; width: 100%; justify-content: center; transform: rotate(var(--insil-tilt)); margin: 0 0 4px; }
.insil-preise__kopf .insil-note--ohne-abo { display: flex; margin-top: 18px; }
.insil-check .insil-note--rueckruf { order: -1; width: 100%; transform: rotate(var(--insil-tilt)); }
.insil-note--m.insil-note--oben-links .insil-note__arrow { order: 2; transform: rotate(-135deg); height: 1.1em; }
.insil-note--m.insil-note--links .insil-note__arrow { order: 2; transform: rotate(-90deg); height: 0.7em; }
.insil-hero__cta { flex-wrap: wrap; }
.insil-subhero h1.insil-angebot__name { font-size: min(14vw, 16vh, 8rem, calc((100vw - 24px) / var(--insil-fit, 8))); }
}
/* v3 fixes: phones show only the four "m" notes; footer contact spacing; a calmer text measure. */
@media (max-width: 959px) {
.insil-note[class*="insil-note--"]:not(.insil-note--m) { display: none; }
}
.insil-footer__claim { margin: 6px 0 0; font-size: 16px; color: var(--insil-on-image-muted); }
.insil-footer__kontakt { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 10px 0 0; font-size: 16.5px; color: var(--insil-on-image-muted); }
.insil-footer__kontakt a { color: var(--wp--preset--color--on-image); }
.insil-footer__base { display: grid; gap: 10px; }
.insil-footer__hinweis { max-width: 82ch; font-size: 14.5px; line-height: 1.55; }
.is-layout-constrained > .insil-angebot__text { max-width: 40rem; }
/* Price list on narrow screens: the price goes under the name, long names may break. */
.insil-preisliste__name { min-width: 0; hyphens: auto; }
@media (max-width: 599px) {
.insil-preisliste__row { flex-direction: column; gap: 2px; }
.insil-preisliste__preis { max-width: none; text-align: left; }
}
/* Phone notes: tilt only the words, so a full-width note never climbs into the line above. */
@media (max-width: 959px) {
.insil-note.insil-note--m { transform: none; }
.insil-note--m .insil-note__text { display: inline-block; transform: rotate(-3deg); }
.insil-preise__kopf .insil-note--ohne-abo { margin: 14px 0 0 !important; }
.insil-hilfe .insil-note--beraten,
.insil-hero__cta .insil-note--kostenlos { margin: 0 0 6px !important; }
}
/*
* v3 structure in the earlier design: offer photo tiles in narrow/wide rows, the two price
* cards, and offer pages with the text beside the "Auf einen Blick" card.
*/
.insil-tiles { display: grid; gap: var(--insil-gap); }
.insil-tiles + .insil-tiles { margin-top: var(--insil-gap); }
.insil-tiles--a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.insil-tiles--b { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.insil-tiles--full { grid-template-columns: 1fr; }
.insil-tiles > .wp-block-cover.is-style-insil-offer { height: auto; margin: 0; }
.insil-tiles__note { display: flex; align-items: center; padding-left: 8px; }
.is-style-insil-offer[data-href] { cursor: pointer; }
div.insil-note--angebote { display: block; }
@media (max-width: 781px) {
.insil-tiles--a,
.insil-tiles--b { grid-template-columns: 1fr; }
.insil-tiles__note { display: none; }
}
.insil-prices--v3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--insil-gap); margin-top: var(--insil-inner); }
.insil-prices--v3 > .is-style-insil-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; margin: 0; }
.insil-prices__group + .insil-prices__group { margin-top: 34px; }
.insil-prices--v3 .insil-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.insil-prices--v3 .insil-row p { margin: 0; }
.insil-prices--v3 .insil-row-name { hyphens: auto; }
@media (max-width: 781px) {
.insil-prices--v3 { grid-template-columns: 1fr; }
}
#preise + .insil-mehr-wrap { padding-top: 0 !important; }
@media (min-width: 960px) {
.insil-angebot.is-layout-constrained {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
column-gap: clamp(40px, 5vw, 88px);
align-items: start;
padding-left: max(58px, calc((100% - 1280px) / 2)) !important;
padding-right: max(58px, calc((100% - 1280px) / 2)) !important;
}
.insil-angebot.is-layout-constrained > * { max-width: none; margin: 0 !important; }
.insil-angebot.is-layout-constrained > .insil-angebot__text { grid-column: 1; grid-row: 1; }
.insil-angebot.is-layout-constrained > .insil-fakten { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 40px; }
.insil-angebot.is-layout-constrained > .insil-anfrage { grid-column: 1; grid-row: 2; margin-top: var(--insil-inner) !important; }
.insil-angebot.is-layout-constrained > .insil-passt { grid-column: 1 / -1; grid-row: 3; margin-top: var(--insil-inner) !important; }
.insil-angebot .insil-fakten { flex-direction: column; align-items: stretch; gap: 20px; padding: 32px; }
.insil-angebot .insil-fakten__list { flex-direction: column; gap: 0; }
.insil-angebot .insil-fakten__item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--wp--preset--color--line); }
.insil-angebot .insil-fakten__item:first-child { padding-top: 0; border-top: 0; }
.insil-angebot .insil-fakten dt { margin: 0; font-family: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--ink); }
.insil-angebot .insil-fakten dd { text-align: right; }
.insil-angebot .insil-fakten__cta { width: 100%; margin: 4px 0 0; }
.insil-angebot .insil-fakten__cta .wp-block-button__link { width: 100%; }
.insil-angebot .insil-fakten__hinweis { margin: 0; }
/* Staggered reading column, as before: every second paragraph steps in. */
.insil-angebot__text > p:nth-child(even) { padding-left: clamp(0px, 5vw, 72px); }
}
main .insil-fakten__titel { margin: 0; padding: 0; border: 0; }
@media (max-width: 959px) {
.insil-fakten__titel { width: 100%; }
}
/*
* Thinner titles. Esperanto comes in one weight only, so its titles are pared down: on plain
* backgrounds a fine stroke in the background colour trims the letter edges (0.012em, about
* 15 % off the main strokes, the hairlines stay clear); on photos, where no colour would
* match, insilentio.js applies an erode filter of exactly one device pixel instead.
*/
:root { --insil-title-bg: var(--wp--preset--color--base); }
.is-style-insil-card,
.insil-fakten { --insil-title-bg: var(--wp--preset--color--surface); }
main :is(h1, h2):not(.wp-block-cover *) { -webkit-text-stroke: 0.012em var(--insil-title-bg); }
@media (min-width: 960px) {
main h3:not(.wp-block-cover *) { -webkit-text-stroke: 0.012em var(--insil-title-bg); }
}
@media (max-width: 959px) {
main h2:not(.wp-block-cover *) { -webkit-text-stroke: 0 transparent; }
}
/* Hero lift (2026-09-30): the photo box reaches above the hero by --insil-hero-lift and is anchored at the bottom
(focal point y 100% in the block), so the Buddha's head sits above the headline on every screen. */
.wp-block-cover.insil-hero { --insil-hero-lift: 16vh; }
.wp-block-cover.insil-hero .wp-block-cover__image-background {
top: calc(-1 * var(--insil-hero-lift));
bottom: 0;
height: calc(100% + var(--insil-hero-lift));
transform-origin: 50% 100%;
}
/*
* Offer carousels (phones and tablets, below 960px): the tiles of each group sit side by side and swipe
* sideways, the next one peeking in at the right edge; dots below mark the tile in view (insilentio.js).
* A group with a single tile (Freitag) keeps its plain layout.
*/
.insil-karussell__punkte { display: none; }
@media (max-width: 959px) {
.insil-groups { grid-template-columns: minmax(0, 1fr); }
.insil-group { min-width: 0; }
.insil-karussell {
--insil-rand: var(--wp--style--root--padding-left, 10px);
display: flex;
gap: var(--insil-gap);
margin-inline: calc(-1 * var(--insil-rand));
padding-inline: var(--insil-rand);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--insil-rand);
scrollbar-width: none;
}
.insil-karussell::-webkit-scrollbar { display: none; }
.insil-karussell > .insil-tiles { display: contents; }
.insil-karussell .wp-block-cover.is-style-insil-offer {
flex: 0 0 min(82%, 460px);
scroll-snap-align: start;
}
.insil-karussell__punkte { display: flex; margin-top: 10px; }
.insil-karussell__punkt {
display: grid;
place-items: center start;
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.insil-karussell__punkt::before {
content: "";
width: 7px;
height: 7px;
border-radius: 4px;
background: color-mix(in srgb, var(--wp--preset--color--heading) 28%, transparent);
transition: width 0.3s ease, background-color 0.3s ease;
}
.insil-karussell__punkt[aria-current="true"]::before { width: 20px; background: var(--wp--preset--color--gold); }
.insil-karussell__punkt:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: -4px; border-radius: 14px; }
}
/*
* Title face (2026-10-01): Julius Sans One (SIL OFL; the file is served unmodified because "Julius" is a
* reserved font name) replaces Esperanto in the headings via theme.json. It runs about 20 % wider than
* Esperanto and is already light, so: the Esperanto thinning (text stroke, erode filter) is off, titles
* keep normal tracking, the phone display sizes and the offer-name fit are divided by --insil-title-wide,
* and the hero headline stays on two lines below the Buddha's head.
*/
:root { --insil-title-wide: 1.2; }
main :is(h1, h2, h3) { -webkit-text-stroke: 0 transparent !important; }
.wp-block-cover :is(h1, h2, h3) { filter: none !important; }
.insil-subhero h1.insil-angebot__name { font-size: min(clamp(2.3rem, 6.4vw, 5.75rem), calc((100vw - 170px) / (var(--insil-fit, 8) * var(--insil-title-wide)))); }
@media (min-width: 960px) {
.wp-block-cover.insil-hero h1 { font-size: calc(clamp(2.6rem, 8.6vw, 7.75rem) / 1.1); max-width: 10.8em; }
}
@media (max-width: 959px) {
main h1,
.insil-subhero h1,
main .insil-band h2,
main .insil-contact h2 { font-size: calc(min(14vw, 16vh, 8rem) / var(--insil-title-wide)); }
.insil-subhero h1.insil-angebot__name { font-size: min(calc(14vw / var(--insil-title-wide)), 16vh, 8rem, calc((100vw - 24px) / (var(--insil-fit, 8) * var(--insil-title-wide)))); }
main h2,
main .insil-head--center h2,
.insil-guide h2,
main h3,
.insil-pillars h3 { letter-spacing: 0; }
}
/*
* Corrections (2026-10-01).
* Notes: every handwritten note at the size of the "Angebote" note: wine red on cream, the design's gold on dark.
*/
span.insil-note,
span.insil-note.insil-note--ausgewaehlt { font-size: clamp(2.1rem, 3.2vw, 3.1rem); }
.wp-block-cover .insil-note,
.wp-block-cover > .insil-note { color: var(--insil-meta); }
/* "Nicht sicher, was passt? Kostenloses Erstgespräch" in one line; "wir beraten Sie" hangs below it on the left, its arrow up onto the link. */
.insil-hilfe { display: block; margin: var(--insil-inner) 0 0; padding-bottom: 2.6em; text-align: center; font-size: 21px; }
.insil-hilfe p { margin: 0; }
.insil-hilfe__link { position: relative; white-space: nowrap; }
.insil-hilfe__link .insil-note--beraten { position: absolute; right: calc(100% + 0.15em); top: 80%; --insil-tilt: -4deg; transform: rotate(var(--insil-tilt)); transform-origin: right center; }
/* "wir rufen zurueck": left of the call-back box, its arrow onto the box. */
@media (min-width: 960px) {
.insil-check .insil-note--rueckruf {
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-55%) rotate(-4deg);
transform-origin: right center;
}
}
/* Menu: a wine-red underline draws in under the hovered word (replaces the scribble). */
.insil-menu__title { position: relative; }
.insil-menu__title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.05em;
height: max(3px, 0.045em);
border-radius: 2px;
background: #7a1f2e;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.insil-menu__link:hover .insil-menu__title::after,
.insil-menu__link:focus-visible .insil-menu__title::after { transform: scaleX(1); }
/* "Mehr erfahren": the three pages in the title face, centred, hard to miss. */
.insil-mehr { padding-top: 0; border-top: 0; }
.insil-mehr__list { text-align: center; }
.insil-mehr__link { align-items: center; gap: 10px; padding: 18px 0; }
.insil-mehr__titel {
font-family: var(--wp--preset--font-family--julius, var(--wp--preset--font-family--esperanto));
font-size: clamp(1.7rem, 2.7vw, 2.75rem);
line-height: 1.05;
text-transform: uppercase;
color: var(--wp--preset--color--heading);
}
.insil-mehr__text { font-size: 16px; }
/* Welcome: a short introduction right under the hero. */
.insil-front-content > .wp-block-group.alignfull.insil-willkommen { padding-bottom: 0 !important; }
.insil-willkommen { text-align: center; }
.insil-willkommen > .insil-label { margin-bottom: 18px; }
.insil-willkommen > .insil-intro { max-width: 32em; margin-inline: auto; text-wrap: pretty; }
@media (max-width: 959px) {
span.insil-note.insil-note--m { font-size: 1.9rem; }
.insil-hilfe { text-align: left; padding-bottom: 3.6em; font-size: min(19px, 3.85vw); }
.insil-hilfe__link .insil-note--beraten { position: absolute; left: 0.1em; right: auto; top: calc(100% + 6px); width: auto; margin: 0 !important; transform: rotate(-3deg); transform-origin: left center; }
.insil-hilfe__link .insil-note--beraten .insil-note__arrow { order: -1; transform: rotate(-45deg); height: 0.9em; }
.insil-check .insil-note--rueckruf .insil-note__arrow { order: -1; transform: rotate(90deg); height: 0.7em; }
.insil-check .insil-note--rueckruf { justify-content: flex-start; }
.insil-mehr__link { padding: 22px 0; }
.insil-mehr__titel { font-size: clamp(1.6rem, 8vw, 2.2rem); }
}
@media (prefers-reduced-motion: reduce) {
.insil-menu__title::after { transition: none; }
}
/* Notes on dark ground (menu, dark mode) also take the design's gold, no glow. */
.insil-menu .insil-menu__note { color: var(--insil-meta); }
@media (prefers-color-scheme: dark) {
:root { --insil-note: var(--insil-meta); }
}
/*
* Arrows as fine as the "Angebote" arrow (about 0.05em of the note): stroke widths per arrow shape,
* since each viewBox is scaled differently; left and right arrows a little shorter.
*/
span.insil-note.insil-note--links .insil-note__arrow,
span.insil-note.insil-note--rechts .insil-note__arrow { height: 0.8em; stroke-width: 1.6; }
span.insil-note.insil-note--unten .insil-note__arrow { stroke-width: 1.8; }
span.insil-note.insil-note--unten-rechts .insil-note__arrow,
span.insil-note.insil-note--unten-links .insil-note__arrow,
span.insil-note.insil-note--oben-links .insil-note__arrow,
span.insil-note.insil-note--oben-rechts .insil-note__arrow { stroke-width: 1.6; }
@media (max-width: 959px) {
.insil-hilfe span.insil-note--beraten .insil-note__arrow { height: 0.9em; stroke-width: 1.9; }
.insil-check span.insil-note--rueckruf .insil-note__arrow { height: 0.7em; stroke-width: 2; }
}
/*
* Photo blocks: WordPress's constrained layout gives every child after the first a top margin and the
* content width; the image and its overlay must cover the whole block, edge to edge.
*/
.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__background { max-width: none !important; margin: 0 !important; }
/*
* Sub pages (Wer Sie begleitet, Der Ort, Häufige Fragen and every offer page): all text starts on the
* left edge of the content column. Narrow blocks sit left instead of centred, no stepped paragraphs,
* lists without indent, facts with their values left-aligned (2026-10-01).
*/
.insil-unterseite.is-layout-constrained > :not(.alignfull):not(.alignwide):not(.insil-lip) {
margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1280px)) / 2)) !important;
margin-right: auto !important;
}
.insil-angebot__text > p:nth-child(even),
.insil-offer-text > p:nth-child(even) { padding-left: 0; }
.insil-unterseite :is(ul, ol):not(.insil-ort-fakten),
.insil-angebot__text :is(ul, ol) { padding-left: 0; list-style-position: inside; }
.insil-angebot .insil-fakten__item,
.insil-ort-fakten li { display: grid; grid-template-columns: minmax(6.5em, 38%) minmax(0, 1fr); justify-content: start; }
.insil-angebot .insil-fakten dd { text-align: left; }
/* Facts on narrow screens: label above its value, so long labels (Voraussetzung) never run into the value. */
@media (max-width: 599px) {
.insil-angebot .insil-fakten__item { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
/* Christian's portrait is a landscape photo: the 4:5 crop keeps him and the dog's face in frame. */
.insil-portrait--christian img { object-position: 36% 50%; }
/*
* Offer carousels on desktop too (2026-10-01): the groups' list runs edge to edge, each carousel row starts on
* the content column and slides out under the right edge. Tiles keep the narrow/wide rhythm of the earlier
* rows (5:7), so the row still reads as tiles. Under each row: dots and, on desktop, two arrows.
*/
.insil-karussell__leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.insil-karussell__leiste.is-statisch { display: none; }
.insil-karussell__leiste .insil-karussell__punkte { display: flex; margin: 0; }
.insil-karussell__pfeile { display: none; gap: 10px; }
.insil-karussell__pfeil {
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--wp--preset--color--gold-line);
border-radius: 50%;
background: transparent;
color: var(--wp--preset--color--heading);
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.insil-karussell__pfeil:hover:not(:disabled) { background: var(--wp--preset--color--heading); border-color: var(--wp--preset--color--heading); color: var(--wp--preset--color--base); }
.insil-karussell__pfeil:disabled { opacity: 0.35; cursor: default; }
.insil-karussell__pfeil:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
@media (min-width: 960px) {
#angebote .insil-groups {
--insil-rand: max(var(--wp--style--root--padding-left, 58px), calc((100% - var(--wp--style--global--content-size, 1280px)) / 2));
grid-template-columns: minmax(0, 1fr);
max-width: none !important;
margin-left: calc(-1 * var(--wp--style--root--padding-left, 58px)) !important;
margin-right: calc(-1 * var(--wp--style--root--padding-right, 58px)) !important;
}
#angebote .insil-group { min-width: 0; }
#angebote .insil-group__head,
#angebote .insil-group__track:not(.insil-karussell),
#angebote .insil-karussell__leiste { margin-left: var(--insil-rand); margin-right: var(--insil-rand); }
.insil-karussell {
display: flex;
gap: var(--insil-gap);
padding-inline: var(--insil-rand);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--insil-rand);
scrollbar-width: none;
}
.insil-karussell::-webkit-scrollbar { display: none; }
.insil-karussell > .insil-tiles { display: contents; }
/* A row that fits grows its tiles in the same 5:7 rhythm, so it fills the column like the old rows did. */
.insil-karussell .wp-block-cover.is-style-insil-offer { flex: 46 0 46%; margin: 0; scroll-snap-align: start; }
.insil-karussell .insil-tiles--a > .wp-block-cover.is-style-insil-offer:first-child,
.insil-karussell .insil-tiles--b > .wp-block-cover.is-style-insil-offer:last-child { flex: 33 0 33%; }
.insil-karussell__pfeile { display: flex; }
.insil-karussell__punkt { display: grid; place-items: center start; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.insil-karussell__punkt::before {
content: "";
width: 7px;
height: 7px;
border-radius: 4px;
background: color-mix(in srgb, var(--wp--preset--color--heading) 28%, transparent);
transition: width 0.3s ease, background-color 0.3s ease;
}
.insil-karussell__punkt[aria-current="true"]::before { width: 20px; background: var(--wp--preset--color--gold); }
.insil-karussell__punkt:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: -4px; border-radius: 14px; }
}
/* Small capital labels in Esperanto (group lines, Willkommen, tile names, Passt auch): one larger size (2026-10-01). */
main .insil-group__label,
main p.insil-label,
main .is-style-insil-offer p.insil-label,
main .insil-passt__label { font-size: clamp(17px, 1.5vw, 22px); }
@media (max-width: 959px) {
main .insil-group__label,
main p.insil-label,
main .is-style-insil-offer p.insil-label,
main .insil-passt__label { font-size: clamp(15px, 4.6vw, 18px); }
}
/*
* Desktop carousels end at the content column like every other block (2026-10-01): no bleed to the screen edge.
* A tile cut off at the edge moves the row on by one tile when clicked (insilentio.js).
*/
@media (min-width: 960px) {
#angebote .insil-groups {
--insil-rand: 0px;
max-width: var(--wp--style--global--content-size, 1280px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
.insil-karussell .is-style-insil-offer.is-angeschnitten { cursor: e-resize; }
/*
* Hero title a touch smaller (x 0.92); the welcome text below runs as wide as the title's lines on desktop
* (Julius: the longer line is about 9.84 times the title size), 2026-10-01.
*/
@media (min-width: 960px) {
:root { --insil-hero-h1: calc(clamp(2.6rem, 8.6vw, 7.75rem) / 1.1 * 0.92); }
.wp-block-cover.insil-hero h1 { font-size: var(--insil-hero-h1); }
.insil-willkommen > .insil-intro { max-width: calc(var(--insil-hero-h1) * 9.84); }
}
@media (max-width: 959px) {
.wp-block-cover.insil-hero h1 { font-size: calc(min(14vw, 16vh, 8rem) / var(--insil-title-wide, 1) * 0.92); }
}
/* Offers head: the introduction under "Wege zur Stärkung …" in justified text, hyphenated so word gaps stay small (2026-10-01). */
#angebote .insil-head--offset > p.insil-intro { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 3 3; text-wrap: wrap; }
@media (min-width: 960px) {
/* The column starts where the heading's second line (ORIENTIERUNG UND, about 10.7 times the heading size) starts. */
#angebote .insil-head--offset > p.insil-intro { max-width: calc(clamp(2.1rem, 5vw, 4.5rem) * 10.7); }
}
@media (max-width: 599px) {
/* On a phone column justified text leaves holes (up to 6 spaces); ragged right, still hyphenated. */
#angebote .insil-head--offset > p.insil-intro { text-align: left; }
}
/*
* Smartphone pass (2026-10-01): readable call to action in the request box, tap targets of 44px,
* no label under 14px, roomier price rows.
*/
/* The request box styles its text links in navy; its button keeps the cream button text (all screens). */
.insil-anfrage .wp-block-button__link,
.insil-anfrage .wp-block-button__link:hover,
.insil-anfrage .wp-block-button__link:focus { color: var(--wp--preset--color--spark-ink); text-decoration: none; }
@media (max-width: 959px) {
/* Menu button in the top bar: a 44px tap area, the bar keeps its height. */
.insil-site-header .insil-head-menu { padding: 14.5px 0 14.5px 24px; margin: -12.5px 0; }
/* Carousel dots: 36 x 44 tap areas, the dots themselves unchanged. */
.insil-karussell__punkt { width: 36px; height: 44px; }
/* Links at the foot of the menu page. */
.insil-menu__foot a { padding: 11px 0; }
/* Labels in the contact block and in "Auf einen Blick". */
.insil-kontakt__info dt,
.insil-angebot .insil-fakten dt { font-size: 14px; }
/* Call-back box. */
.insil-check input { width: 24px; height: 24px; }
/* Price cards: less padding and slightly smaller prices, so the offer names wrap less. */
.insil-prices--v3 > .wp-block-group.is-style-insil-card { padding: 24px 18px; }
.insil-prices--v3 .insil-row-price { font-size: 20px; }
}
/*
* Phones (2026-10-01): the menu rows fill the whole screen between the top bar and the foot links;
* section titles (Wege zur Stärkung …, Auf einen Blick, Der erste Schritt) at the size of the sub page titles.
*/
@media (max-width: 959px) {
.insil-menu__nav { align-items: stretch; }
.insil-menu__list { flex: 1 1 auto; display: flex; flex-direction: column; }
.insil-menu__row,
.insil-menu__row:last-child { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 0; }
main #angebote .insil-head h2,
main #preise h2,
main .insil-contact h2 {
padding: 0;
border: 0;
font-size: var(--wp--preset--font-size--xx-large);
line-height: 0.95;
}
}
/*
* Smartphone notes and galleries (2026-10-02, arrows redrawn after the user's sketches the same morning).
* Each gallery shows one tile at the size of the "Stille und Klang" tile, with the arrows below it as on the
* desktop. The first gallery carries "mehr" on its first tile, pointing down to the next-arrow, for as long as it
* rests on that tile (insilentio.js). "zum Reinschnuppern" sits in the top corner of the Stille und Klang tile with
* a long bow down to its title; "wir beraten Sie" halfway between the help line and "Auf einen Blick", its arrow
* curving up onto the link; "wir rufen zurueck" on the right, its arrow running left and bending down onto the
* call-back box. The first introduction is set in the text face. "Notizen: an / aus" also sits at the foot of
* the menu, since phones have no side rail.
*/
.insil-note__arrow--m,
.insil-swipe,
.insil-menu__notizen { display: none; }
.insil-karussell__pfeile { display: flex; }
@media (min-width: 960px) {
.wp-block-cover > .insil-note--schnuppern-kachel { display: none !important; }
}
@media (max-width: 959px) {
/* The first introduction in the text face, like the body text. */
#angebote .insil-head--offset > p.insil-intro {
font-family: var(--wp--preset--font-family--marxiana, "TT Marxiana", Georgia, serif);
font-size: 17px;
line-height: 1.6;
letter-spacing: normal;
}
/* Notes with an arrow of their own on phones. */
.insil-note--m-pfeil > .insil-note__arrow:not(.insil-note__arrow--m) { display: none; }
.insil-note--m-pfeil > .insil-note__arrow--m { display: block; transform: none; stroke-width: 1.6; }
/* "zum Reinschnuppern" in the top corner of the Stille und Klang tile, a long bow from its first word down to
the title; the photo is darkened a little under it, so the gold stays readable on light photos. */
.wp-block-cover > .insil-note--schnuppern-kachel {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-end;
width: auto;
height: 66%;
padding: 40px 18px 0;
border-radius: 12px 12px 0 0;
background: linear-gradient(180deg, rgba(6, 14, 26, 0.62) 0%, rgba(6, 14, 26, 0.42) 40%, rgba(6, 14, 26, 0) 100%);
}
.wp-block-cover > .insil-note--schnuppern-kachel .insil-note__arrow {
position: absolute;
top: 55px;
right: 182px;
width: 100px;
height: 262px;
margin: 0;
transform: none;
stroke-width: 1.6;
}
/* "wir beraten Sie": centred in the gap between the help line and "Auf einen Blick"; from its last word the arrow
curves up onto the link (it hangs above the words, so it does not move them off the middle). */
.insil-hilfe { --insil-hilfe-luft: 52px; position: relative; padding-bottom: var(--insil-hilfe-luft); }
.insil-hilfe .insil-hilfe__link { position: static; }
.insil-hilfe .insil-hilfe__link .insil-note--beraten {
left: 0;
right: 0;
top: calc(100% + (var(--insil-section) - var(--insil-hilfe-luft)) / 2);
align-items: center;
justify-content: center;
transform: translateY(-50%);
}
.insil-hilfe span.insil-note--beraten .insil-note__arrow.insil-note__arrow--m {
order: 0;
width: 34px;
height: 74px;
margin-top: -68px;
transform: none;
stroke-width: 1.6;
}
/* "wir rufen zurueck" on the right; the arrow runs left from its first word and bends down onto the box.
The arrow is drawn long and cut where the words begin (preserveAspectRatio slice), so it fits any width. */
.insil-check { padding-top: 58px; }
.insil-check .insil-note--rueckruf.insil-note--m-pfeil {
position: absolute;
top: 0;
left: 5px;
right: 0;
width: auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 6px;
transform: none;
}
.insil-check span.insil-note--rueckruf .insil-note__arrow.insil-note__arrow--m {
order: -1;
flex: 1 1 auto;
min-width: 0;
width: 330px;
max-width: 330px;
height: 54px;
overflow: hidden;
transform: none;
stroke-width: 1.6;
}
.insil-check .insil-note--rueckruf .insil-note__text { flex: none; margin-top: -3px; }
/* Galleries: dots on the left, arrows on the right. */
.insil-karussell__leiste { margin-top: 10px; }
/* "mehr" on the first tile of the first gallery, its arrow down to the next-arrow below the tile. */
.insil-group { position: relative; }
.insil-swipe.is-bereit {
position: absolute;
z-index: 3;
display: block;
pointer-events: none;
opacity: 0;
transition: opacity 0.45s ease;
}
.insil-swipe.is-sichtbar { opacity: 1; }
.insil-swipe .insil-note.insil-note--m {
position: absolute;
right: 14px;
bottom: 0;
display: block;
color: var(--insil-meta);
}
.insil-swipe .insil-note .insil-note__text { position: absolute; right: 12px; bottom: calc(100% + 2px); }
.insil-swipe .insil-note .insil-note__arrow { display: block; width: 44px; height: 116px; transform: none; stroke-width: 1.6; }
.insil-notes-off .insil-swipe { display: none !important; }
/* "Notizen: an / aus" at the foot of the menu. */
.insil-menu__foot .insil-menu__notizen {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 8px 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
}
.insil-menu__notizen span { padding: 3px 8px; }
.insil-menu__notizen:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
}
@media (max-width: 599px) {
/* Phones: every tile as large as the Stille und Klang tile, one tile per swipe. */
.insil-karussell .wp-block-cover.is-style-insil-offer { flex: 0 0 100%; scroll-snap-stop: always; }
}
/*
* Menu page on phones (2026-10-02): Safari on the iPhone shows the page under the status bar and under its floating
* address bar, where no fixed layer reaches. While the menu is open the page itself is hidden (only the top bar with
* "Schliessen" stays) and the page ground is night, so those strips show the menu colour too.
*/
html.insil-menu-open,
html.insil-menu-open body { background-color: var(--wp--preset--color--night); }
@media (max-width: 959px) {
html.insil-menu-open .wp-site-blocks { visibility: hidden; }
html.insil-menu-open .insil-site-header { visibility: visible; }
}
/*
* Menu foot (2026-10-02): the notes switch, the address, then Impressum and Datenschutzerklaerung side by side;
* "Termin anfragen" is now the note at KONTAKT. On phones the three lines stack, centred, and sit a little lower.
*/
.insil-menu__recht { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
@media (max-width: 959px) {
.insil-menu__foot { flex-direction: column; align-items: center; padding-bottom: 6px; }
.insil-menu__recht { gap: 4px 26px; }
}
/*
* Offer pages (2026-10-02): no request box under the text any more (the facts card keeps "Termin anfragen");
* "Passt auch" ends with the free first talk, so up to three cards share the row on wider screens.
*/
.insil-angebot > .insil-passt { margin-top: var(--insil-inner); }
@media (min-width: 782px) {
.insil-passt__links { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/*
* Offer pages on phones and tablets (2026-10-02): the photo and the "Auf einen Blick" card sit closer together; the
* card lists its facts one per row (Wann, Mit, Preis first), with lines between and room around each value.
*/
@media (max-width: 959px) {
.insil-front-content > .wp-block-group.alignfull.insil-angebot { padding-top: 40px !important; }
.insil-angebot > .insil-fakten { margin-top: 0 !important; }
.insil-angebot .insil-fakten { flex-direction: column; align-items: stretch; gap: 22px; padding: 26px 22px 24px; }
.insil-angebot .insil-fakten__list { flex-direction: column; gap: 0; }
.insil-angebot .insil-fakten__item { column-gap: 16px; padding: 14px 0; border-left: 0; border-top: 1px solid var(--wp--preset--color--line); }
.insil-angebot .insil-fakten__item:first-child { padding-top: 0; border-top: 0; }
.insil-angebot .insil-fakten dt { margin: 0; }
.insil-angebot .insil-fakten__cta { width: 100%; margin: 2px 0 0; }
.insil-angebot .insil-fakten__cta .wp-block-button__link { display: block; box-sizing: border-box; width: 100%; text-align: center; }
.insil-angebot .insil-fakten__hinweis { margin: 0; }
}
@media (max-width: 599px) {
.insil-angebot .insil-fakten__item { row-gap: 5px; }
}
/*
* Tablets and half-width desktop windows (600 to 959px, 2026-10-02): the handwriting keeps pointing at its target.
* "wir beraten Sie": the help line is centred, so the arrow from the note in the gap lands on the link.
* "zum Reinschnuppern": from 782px the Stille und Klang tile sits in its narrow column again, so the desktop note
* points at it from the free column beside it; on the full-width tile below that the note moves to the top left,
* its bow down onto the title. "mehr" sits at the right end of the row, over its arrow (insilentio.js).
*/
@media (min-width: 600px) and (max-width: 959px) {
.insil-hilfe { text-align: center; }
}
@media (min-width: 600px) and (max-width: 781px) {
.wp-block-cover > .insil-note--schnuppern-kachel { align-items: flex-start; padding-left: 166px; }
.wp-block-cover > .insil-note--schnuppern-kachel .insil-note__arrow { left: 70px; right: auto; }
}
@media (min-width: 782px) and (max-width: 959px) {
.wp-block-cover > .insil-note--schnuppern-kachel { display: none !important; }
.insil-tiles__note .insil-note.insil-note--schnuppern { display: inline-flex; }
}
/* Up to 781px every gallery tile is as wide as the row, like the Stille und Klang tile there, one per swipe; from 782px
the galleries keep the next tile peeking in, as on the desktop, and "mehr" is not needed. */
@media (max-width: 781px) {
.insil-karussell .wp-block-cover.is-style-insil-offer { flex: 0 0 100%; scroll-snap-stop: always; }
}
/*
* Offer pages (2026-10-02): the facts card sits in a column wrapper (.insil-fakten-spalte). On the desktop the wrapper
* spans the text rows, so the card follows the reader only as far as the text goes and stops above "Passt auch";
* below 960px the card is exactly as wide as the text under it (40rem, centred like the text).
*/
@media (min-width: 960px) {
.insil-angebot.is-layout-constrained > .insil-fakten-spalte { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
.insil-fakten-spalte > .insil-fakten { position: sticky; top: 40px; }
}
@media (max-width: 959px) {
.insil-angebot > .insil-fakten-spalte { max-width: 40rem; margin-top: 0 !important; }
}
/* Der Ort (2026-10-02): the real photo of the Sonorium room takes the place of the 4:3 placeholder. */
.insil-ort-foto { margin: 0; }
.insil-ort-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; border-radius: var(--insil-r-card); }
/* New photos (2026-10-06): focal points for the offer tiles, offer-page headers and the contact cover. */
.wp-block-cover img.wp-image-154 { object-position: 45% 50% !important; }
.wp-block-cover img.wp-image-160 { object-position: 45% 50% !important; }
.wp-block-cover img.wp-image-161 { object-position: 50% 60% !important; }
.wp-block-cover img.wp-image-163 { object-position: 50% 72% !important; }
.wp-block-cover img.wp-image-167 { object-position: 50% 60% !important; }
/* Brighter photos (2026-10-07): focal points. */
.wp-block-cover img.wp-image-169 { object-position: 45% 50% !important; }
.wp-block-cover img.wp-image-170 { object-position: 45% 55% !important; }
.wp-block-cover img.wp-image-172 { object-position: 50% 55% !important; }
.wp-block-cover img.wp-image-175 { object-position: 50% 60% !important; }
/* Brighter tiles (2026-10-07): full colour photos, shorter gradient (inc/angebote.php), so the small name line above the tile headline switches from gold to cream to stay legible on light photos. */
main .is-style-insil-offer p.insil-label { color: var(--wp--preset--color--on-image); opacity: 0.92; }
/* Stressregulation blossom photo (2026-10-07): keep the blossoms in the offer-page header. */
.wp-block-cover img.wp-image-178 { object-position: 50% 55% !important; }
/* Critique fixes (2026-10-07). */
/* Tile names on bright photos: a soft dark shadow under the cream letters keeps them readable without a box. */
main .is-style-insil-offer p.insil-label { text-shadow: 0 1px 12px rgba(6, 14, 26, 0.6); }
/* Keyboard focus in the menu and on the rails: a clear 2px ring instead of a faint hairline. */
.insil-menu__link:focus-visible { outline: 2px solid var(--wp--preset--color--on-image); }
.insil-rail__item:focus-visible { outline-width: 2px; }
/* Photo set v4 (2026-10-07): every tile photo colour-matched to one warm, bright look (new attachments 179-193;
Erschoepfung, Coaching, Praevention and Offener Freitag are new photos). Focal points carried over from the old files. */
.wp-block-cover img.wp-image-179 { object-position: 45% 55% !important; }
.wp-block-cover img.wp-image-181 { object-position: 50% 55% !important; }
.wp-block-cover img.wp-image-188 { object-position: 50% 60% !important; }
.wp-block-cover img.wp-image-191 { object-position: 50% 72% !important; }
.wp-block-cover img.wp-image-192 { object-position: 50% 60% !important; }
.wp-block-cover img.wp-image-182 { object-position: 60% 72% !important; }
/* Footer note: a calmer measure (was 82ch, about 97 characters a line). */
.insil-footer__hinweis { max-width: 66ch; }
/* Owner's photos (2026-10-07, afternoon): oil flask (Regenerationsritual), cushions and pebbles (Offener Freitag), Kurpark benches (Wochenende in Bad Ems). */
.wp-block-cover img.wp-image-197 { object-position: 22% 72% !important; }
.wp-block-cover img.wp-image-198 { object-position: 55% 62% !important; }
.wp-block-cover img.wp-image-199 { object-position: 50% 80% !important; }
/* Buddha on Regeneration bei Erschoepfung (2026-10-07): keep the figure (left third) in the tile and the offer-page header. */
.wp-block-cover img.wp-image-124 { object-position: 20% 40% !important; }
/* Integrale Tiefenentspannung (2026-10-07): hands at the temples; keep the face above the tile text. */
.wp-block-cover img.wp-image-202 { object-position: 50% 65% !important; }
.wp-block-cover.is-style-insil-offer img.wp-image-202 { object-position: 50% 80% !important; }
.wp-block-cover.insil-subhero img.wp-image-202 { object-position: 50% 52% !important; }
/* Sonorium room in daylight (2026-10-07, light corrected): gong frame and seat in view. */
.wp-block-cover img.wp-image-203 { object-position: 50% 58% !important; }
.wp-block-cover img.wp-image-204 { object-position: 50% 58% !important; }
.wp-block-cover img.wp-image-205 { object-position: 50% 60% !important; }
/*
* Wer Sie begleitet, new structure (2026-10-10): an index of the three chapters, one chapter per person
* (portrait sticks beside the text, Christian mirrored), Elvira's method inside her chapter, the offers
* each person leads (from the "Mit" fact), then what both do together. Existing type, colours and cards.
*/
.insil-unterseite .insil-blicke { margin-top: var(--insil-inner) !important; border-top: 1px solid var(--wp--preset--color--line); }
.insil-blicke__link {
display: grid;
grid-template-columns: 4.2em minmax(0, 1fr) auto;
align-items: baseline;
gap: 4px 24px;
padding: 20px 0;
border-bottom: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--heading);
text-decoration: none;
}
.insil-blicke__nr { font-family: var(--wp--preset--font-family--esperanto); font-size: 15px; color: var(--wp--preset--color--muted); }
.insil-blicke__name { font-family: var(--wp--preset--font-family--julius); font-size: var(--wp--preset--font-size--x-large); line-height: 1.05; text-transform: uppercase; }
.insil-blicke__fokus { font-family: var(--wp--preset--font-family--esperanto); font-size: 1.25rem; color: var(--wp--preset--color--gold); text-align: right; }
.insil-blicke__link:hover .insil-blicke__name,
.insil-blicke__link:focus-visible .insil-blicke__name { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.insil-blicke__link:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; }
.insil-person,
.insil-gemeinsam { margin-top: var(--insil-section) !important; padding-top: var(--insil-inner); border-top: 1px solid var(--wp--preset--color--line); }
.insil-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.insil-person--gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.insil-person--gespiegelt > .insil-portrait { order: 2; }
.insil-person > .insil-portrait { position: sticky; top: 40px; margin: 0; }
.insil-person__text > *,
.insil-methode > *,
.insil-gemeinsam > * { margin-block: 0; }
.insil-person__text > * + *,
.insil-methode > * + * { margin-top: 18px; }
.insil-gemeinsam > * + * { margin-top: 22px; }
main .insil-person h2.insil-person__name,
main .insil-gemeinsam h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 0.95; }
main .insil-gemeinsam h2 { max-width: 14em; }
.insil-person__text > .insil-team__rolle { margin-top: 12px; }
.insil-person__text > p:not([class]),
.insil-methode > p:not([class]) { max-width: 66ch; }
.insil-zitat {
max-width: 30ch;
margin-top: 32px !important;
padding-left: 22px;
border-left: 2px solid var(--wp--preset--color--gold-line);
font-family: var(--wp--preset--font-family--esperanto);
font-size: clamp(1.35rem, 2.1vw, 1.8rem);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--wp--preset--color--heading);
}
.insil-gemeinsam > .insil-sublead { max-width: 46ch; }
.insil-person .insil-mit,
.insil-gemeinsam .insil-mit { grid-template-columns: minmax(0, 1fr); margin-top: var(--insil-inner) !important; }
/* Elvira's method, inside her chapter */
.insil-methode { margin-top: var(--insil-inner) !important; padding-top: var(--insil-inner); border-top: 1px solid var(--wp--preset--color--line); }
main .insil-methode h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 0.98; }
main .insil-methode h4 { margin-top: var(--insil-inner); font-family: var(--wp--preset--font-family--julius); font-size: 1.5rem; font-weight: 400; line-height: 1.05; text-transform: uppercase; color: var(--wp--preset--color--heading); }
.insil-methode > .wp-block-buttons { margin-top: 26px; }
.insil-methode > .insil-sublead { margin-top: 28px; }
.insil-ziele { margin-top: 22px !important; border-top: 1px solid var(--wp--preset--color--line); }
.insil-ziel { display: grid; grid-template-columns: minmax(8.5em, 34%) minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.insil-ziel > * { margin: 0; }
.insil-ziel li + li { margin-top: 6px; }
.insil-schritte { max-width: 66ch; margin-top: 22px; border-top: 1px solid var(--wp--preset--color--line); }
.insil-schritte li { padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.insil-schritte li::marker { font-family: var(--wp--preset--font-family--esperanto); color: var(--wp--preset--color--gold); }
.insil-unterseite .insil-head > .insil-label + h1 { margin-top: 14px; }
.insil-gemeinsam .insil-mit .insil-passt__links { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.insil-unterseite .insil-staerken { max-width: 66ch; margin-top: 22px; border-top: 1px solid var(--wp--preset--color--line); list-style-type: none; }
.insil-staerken li { padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.insil-person__text > .insil-staerken + p { margin-top: 28px; }
@media (max-width: 959px) {
main .insil-person h2.insil-person__name,
main .insil-gemeinsam h2 { font-size: var(--wp--preset--font-size--x-large) !important; line-height: 1.05; }
main .insil-methode h3 { font-size: 1.6rem; }
main .insil-methode h4 { font-size: 1.2rem; }
}
@media (max-width: 781px) {
.insil-person,
.insil-person--gespiegelt { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.insil-person > .insil-portrait,
.insil-person--gespiegelt > .insil-portrait { position: static; order: 0; max-width: 420px; }
.insil-ziel { grid-template-columns: minmax(0, 1fr); }
.insil-blicke__link { grid-template-columns: 3em minmax(0, 1fr); padding: 16px 0; }
.insil-blicke__fokus { grid-column: 2; font-size: 1.05rem; text-align: left; }
}
/* Wer Sie begleitet with a photo header (2026-10-10): the chapter bar sits in one row under the photo, Elvira follows closer. */
.insil-subhero--seite .insil-seite__einleitung { max-width: 44ch; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.38; }
.insil-front-content > .insil-subhero--seite + .wp-block-group.alignfull.insil-unterseite { padding-top: var(--insil-inner) !important; }
.insil-unterseite > .insil-blicke:first-child { margin-top: 0 !important; }
.insil-blicke + .insil-person { margin-top: var(--insil-inner) !important; padding-top: 0; border-top: 0; }
@media (min-width: 782px) {
.insil-blicke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--wp--preset--color--line); }
.insil-blicke__link { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 22px 24px 26px; border-bottom: 0; }
.insil-blicke__link:first-child { padding-left: 0; }
.insil-blicke__link + .insil-blicke__link { border-left: 1px solid var(--wp--preset--color--line); }
.insil-blicke__fokus { text-align: left; }
}
/* Seerose photo header: taller, only the title on it over a light bottom shade, the intro sits under it (2026-10-10). */
.wp-block-cover.insil-subhero--hell { min-height: clamp(460px, 74vh, 760px) !important; }
.insil-subhero--hell > .wp-block-cover__image-background { object-position: 50% 46% !important; }
.insil-unterseite > .insil-head:first-child .insil-intro { margin-top: 0; }
.insil-person__text > .insil-person__mehr { margin-top: 22px; }
.insil-person__mehr a { color: var(--wp--preset--color--heading); text-decoration-color: var(--wp--preset--color--gold-line); text-underline-offset: 4px; }
/* Kerze (Achtsamkeitstraining, 2026-10-11): keep the flame and the bowl in view. */
.wp-block-cover img.wp-image-240 { object-position: 35% 40% !important; }
/*
* Hero video (2026-10-16): frame 0 sits in a as the still, the