/**
* Theme Name: Tensa Child
* Author: Jegstudio
* Template: tensa
* Text Domain: tensa-child
* Description: Tensa is a sleek and modern WordPress theme designed specifically for interior designers, offering a minimalist and clean layout that emphasizes simplicity and elegance. With its unique design, Tensa ensures your portfolio and projects stand out, while the fully responsive structure guarantees a seamless experience across all devices. Perfect for showcasing your work in a professional and visually stunning way, Tensa combines functionality with aesthetic appeal to elevate your online presence.
* Theme URI: https://fse.jegtheme.com/tensa/
* Author URI: https://support.jegtheme.com/
* Version: 1.0.0
* License: GNU General Public License v3 or later.
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
* Tags: custom-header,full-site-editing,full-width-template,footer-widgets
*/
:root {
--guten-screen-xs-max: 767px;
--guten-screen-sm-min: 768px;
--guten-screen-sm-max: 1024px;
--guten-screen-md-min: 1025px;
}
html body {
--gutenverse-font-family-cMRfTH: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-cMRfTH: 50px;
--gutenverse-font-spacing-cMRfTH: 0em;
--gutenverse-font-family-82lcQ2: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-82lcQ2: 50px;
--gutenverse-font-weight-82lcQ2: 500;
--gutenverse-font-transform-82lcQ2: uppercase;
--gutenverse-font-lineHeight-82lcQ2: 1.2em;
--gutenverse-font-spacing-82lcQ2: 0.04em;
--gutenverse-font-family-w6zxP6: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-w6zxP6: 32px;
--gutenverse-font-weight-w6zxP6: 500;
--gutenverse-font-lineHeight-w6zxP6: 1.3em;
--gutenverse-font-spacing-w6zxP6: -0.02em;
--gutenverse-font-family-ICVEBp: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-ICVEBp: 24px;
--gutenverse-font-weight-ICVEBp: 500;
--gutenverse-font-transform-ICVEBp: uppercase;
--gutenverse-font-lineHeight-ICVEBp: 1em;
--gutenverse-font-spacing-ICVEBp: 0.08em;
--gutenverse-font-family-yAWFIy: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-yAWFIy: 16px;
--gutenverse-font-weight-yAWFIy: 500;
--gutenverse-font-lineHeight-yAWFIy: 1em;
--gutenverse-font-family-NR0jAz: "Plus Jakarta Sans";
--gutenverse-font-size-NR0jAz: 18px;
--gutenverse-font-weight-NR0jAz: 400;
--gutenverse-font-lineHeight-NR0jAz: 1.5em;
--gutenverse-font-family-DCPs7I: "Plus Jakarta Sans";
--gutenverse-font-size-DCPs7I: 16px;
--gutenverse-font-weight-DCPs7I: 400;
--gutenverse-font-lineHeight-DCPs7I: 1.5em;
--gutenverse-font-family-F2b8gX: "Plus Jakarta Sans";
--gutenverse-font-size-F2b8gX: 14px;
--gutenverse-font-weight-F2b8gX: 400;
--gutenverse-font-transform-F2b8gX: capitalize;
--gutenverse-font-lineHeight-F2b8gX: 1em;
--gutenverse-font-family-tn2xDm: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-tn2xDm: 18px;
--gutenverse-font-weight-tn2xDm: 500;
--gutenverse-font-transform-tn2xDm: uppercase;
--gutenverse-font-lineHeight-tn2xDm: 1em;
--gutenverse-font-spacing-tn2xDm: 0.08em;
--gutenverse-font-family-0U4VoL: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-0U4VoL: 16px;
--gutenverse-font-weight-0U4VoL: 400;
--gutenverse-font-transform-0U4VoL: uppercase;
--gutenverse-font-lineHeight-0U4VoL: 1em;
--gutenverse-font-spacing-0U4VoL: 0.1em;
--gutenverse-font-family-i0LEpV: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-i0LEpV: 16px;
--gutenverse-font-weight-i0LEpV: 500;
--gutenverse-font-lineHeight-i0LEpV: 1em;
--gutenverse-font-family-pwBV5I: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-pwBV5I: 24px;
--gutenverse-font-weight-pwBV5I: 500;
--gutenverse-font-lineHeight-pwBV5I: 1.3em;
--gutenverse-font-spacing-pwBV5I: -0.01em;
--gutenverse-font-family-S9XiQ5: "Plus Jakarta Sans";
--gutenverse-font-size-S9XiQ5: 14px;
--gutenverse-font-transform-S9XiQ5: uppercase;
--gutenverse-font-lineHeight-S9XiQ5: 1em;
--gutenverse-font-spacing-S9XiQ5: 0.04em;
--gutenverse-font-family-0fKacR: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-0fKacR: 32px;
--gutenverse-font-weight-0fKacR: 500;
--gutenverse-font-transform-0fKacR: uppercase;
--gutenverse-font-lineHeight-0fKacR: 1.3em;
--gutenverse-font-spacing-0fKacR: 0.08em;
--gutenverse-font-family-qvjcaQ: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-qvjcaQ: 18px;
--gutenverse-font-weight-qvjcaQ: 500;
--gutenverse-font-lineHeight-qvjcaQ: 1em;
--gutenverse-font-family-u9A4vw: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-u9A4vw: 72px;
--gutenverse-font-weight-u9A4vw: 500;
--gutenverse-font-transform-u9A4vw: uppercase;
--gutenverse-font-lineHeight-u9A4vw: 1.1em;
--gutenverse-font-spacing-u9A4vw: 0.02em;
--gutenverse-font-family-TC377z: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-TC377z: 64px;
--gutenverse-font-weight-TC377z: 500;
--gutenverse-font-lineHeight-TC377z: 1em;
--gutenverse-font-spacing-TC377z: em;
--gutenverse-font-family-KQK75i: "Plus Jakarta Sans";
--gutenverse-font-size-KQK75i: 32px;
--gutenverse-font-weight-KQK75i: 400;
--gutenverse-font-lineHeight-KQK75i: 1.3em;
--gutenverse-font-family-fx55kT: var(
--wp--preset--font-family--founders-grotesk
);
--gutenverse-font-size-fx55kT: 16px;
--gutenverse-font-weight-fx55kT: 500;
--gutenverse-font-lineHeight-fx55kT: 1.3em;
}
@media only screen and (max-width: 1024px) {
html body {
--gutenverse-font-size-82lcQ2: 46px;
--gutenverse-font-size-w6zxP6: 28px;
--gutenverse-font-size-ICVEBp: 22px;
--gutenverse-font-size-yAWFIy: 15px;
--gutenverse-font-size-NR0jAz: 17px;
--gutenverse-font-size-DCPs7I: 15px;
--gutenverse-font-size-F2b8gX: 13px;
--gutenverse-font-size-tn2xDm: 17px;
--gutenverse-font-size-0U4VoL: 15px;
--gutenverse-font-size-pwBV5I: 22px;
--gutenverse-font-size-S9XiQ5: 13px;
--gutenverse-font-size-0fKacR: 30px;
--gutenverse-font-size-qvjcaQ: 17px;
--gutenverse-font-size-u9A4vw: 56px;
--gutenverse-font-size-TC377z: 56px;
--gutenverse-font-size-KQK75i: 28px;
--gutenverse-font-size-fx55kT: 15px;
}
}
@media only screen and (max-width: 767px) {
html body {
--gutenverse-font-size-82lcQ2: 34px;
--gutenverse-font-size-w6zxP6: 24px;
--gutenverse-font-size-ICVEBp: 20px;
--gutenverse-font-size-yAWFIy: 14px;
--gutenverse-font-size-NR0jAz: 16px;
--gutenverse-font-size-DCPs7I: 14px;
--gutenverse-font-size-F2b8gX: 12px;
--gutenverse-font-size-tn2xDm: 16px;
--gutenverse-font-size-0U4VoL: 14px;
--gutenverse-font-size-pwBV5I: 20px;
--gutenverse-font-size-S9XiQ5: 12px;
--gutenverse-font-size-0fKacR: 24px;
--gutenverse-font-size-qvjcaQ: 16px;
--gutenverse-font-size-u9A4vw: 45px;
--gutenverse-font-size-TC377z: 48px;
--gutenverse-font-size-KQK75i: 24px;
--gutenverse-font-size-fx55kT: 14px;
}
}
/* ──────────────────────────────────────────────────────────────────────
Founders Grotesk global erzwingen – auf Property-Ebene.
Greift direkt an den Elementen statt an den per-Block generierten
--gutenverse-font-family-*-Variablen. Dadurch ist die Regel immun
gegen das Neugenerieren der Variablen-Suffixe (passiert bei jeder
Block-Bearbeitung im Editor) und gegen die Cascade-/Source-Order-
Probleme von Gutenverse: !important schlägt jede Gutenverse-Deklaration
unabhängig von Spezifität und Reihenfolge.
Ausgenommen sind Icon-Fonts (gtnicon / Font Awesome / Dashicons / SVG),
damit Icons nicht zu Kästchen werden.
────────────────────────────────────────────────────────────────────── */
html
body
:where(
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
div,
blockquote,
cite,
q,
figcaption,
caption,
button,
input,
textarea,
select,
option,
label,
legend,
table,
th,
td,
dl,
dt,
dd,
ul,
ol,
em,
strong,
b,
u,
small,
mark,
sub,
sup,
code
):not(svg):not(svg *):not(.guten-icon):not([class*="gtnicon"]):not(
[class*="fa-"]
):not(.dashicons):not(.dashicons-before) {
font-family: var(--wp--preset--font-family--founders-grotesk) !important;
}
/* ─────────────────────────────────────────────────────────────────────
Projekt-Kacheln quadratisch (Aspect-Ratio 1/1).
Die Regel war vorher auf .page-projects beschränkt – eine Body-Klasse,
die assets/js/libs.js aus dem ersten Pfadsegment der URL setzt. Auf den
Kategorieseiten (/bueros-und-verwaltung/, /visionen/, …) heißt die Klasse
anders, dort griff die Regel deshalb nicht: die Kacheln liefen auf
Inhaltshöhe (gemessen 585x485 statt 585x585).
Jetzt seitenunabhängig über die Struktur der Kachel selbst: Wrapper mit
Link (.with-url). Geprüft über alle 13 Seiten der Site – jeder
.with-url-Wrapper ist genau so eine Projekt-Kachel (Wrapper mit
Hintergrundbild + Icon-Box darin). Die Icon-Boxen z. B. auf
/contact-us/ liegen nicht in einem .with-url-Wrapper und bleiben
unberührt; die inneren Selektoren sind zusätzlich unter der Kachel
verschachtelt.
──────────────────────────────────────────────────────────────────── */
.guten-column-wrapper
.wp-block-gutenverse-wrapper.with-url:not(.background-animated),
.guten-column-wrapper
.wp-block-gutenverse-wrapper.with-url
.guten-element.guten-icon-box,
.guten-column-wrapper
.wp-block-gutenverse-wrapper.with-url
.guten-icon-box-wrapper.hover-from-left {
aspect-ratio: 1/1 !important;
}
.guten-column-wrapper
.wp-block-gutenverse-wrapper.with-url
.guten-icon-box-wrapper.hover-from-left {
display: flex;
flex-direction: row; /* Default layout behavior */
align-items: center; /* Centers elements vertically */
}
:not(.inline-icon-list) > .guten-icon-list-item:not(:last-child),
.guten-DQtz06
> .list-wrapper:not(.inline-icon-list)
> .guten-icon-list-item:not(:last-child) {
padding-bottom: 0rem !important;
}
/* ──────────────────────────────────────────────────────────────────────
Header/Menü transparent über dem Inhalt.
Die Header-Section soll den darunterliegenden Hero überlappen. Gutenverse
löst das mit einem negativen margin-bottom — und das muss exakt der
Headerhöhe entsprechen, sonst bleibt ein Streifen der weissen Seitenfläche
sichtbar oder der Inhalt rutscht zu weit hoch. Gemessen stimmten beide
Werte nicht:
Desktop padding-bottom: -80px (negatives Padding ist ungültig und wird
verworfen → Header stand auf Weiss)
Mobile margin-bottom: -72px bei 75px Headerhöhe → 3px weisser Rand
Statt die Zahlen je Breakpoint nachzupflegen, wird der Header hier ganz aus
dem Fluss genommen. Dann entspricht die Überlappung immer genau seiner Höhe,
unabhängig von Breakpoint, Padding oder Logogrösse. Bezug ist
.guten-post-content, das bereits position: relative trägt.
Selektor bewusst ohne die generierte guten-*-ID (die ändert sich bei
Block-Bearbeitung): erste Section im Post-Content, die das Nav-Menü enthält.
────────────────────────────────────────────────────────────────────── */
.guten-post-content > .section-wrapper:first-child:has(.guten-nav-menu) {
position: absolute;
inset: 0 0 auto 0;
z-index: 100;
}
/* Der negative Aussenabstand aus dem Block zieht jetzt nichts mehr nach oben,
würde die Höhe des herausgelösten Kastens aber unter die des Headers
drücken. Raus damit, damit Kasten und sichtbarer Header deckungsgleich
bleiben. */
.guten-post-content
> .section-wrapper:first-child
> .wp-block-gutenverse-section:has(.guten-nav-menu) {
margin-bottom: 0 !important;
}
/* Luft über Logo und Menü. Auf Tablet/Mobile bringt die Section schon 20px
Innenabstand mit, auf Desktop steht er auf 0 — dort klebte das Logo sonst
an der Oberkante des Bildes. */
@media only screen and (min-width: 1025px) {
.guten-post-content
> .section-wrapper:first-child
> .wp-block-gutenverse-section:has(.guten-nav-menu) {
padding-top: 24px !important;
}
}
/* ──────────────────────────────────────────────────────────────────────
Header-Logo als Link auf die Startseite (Markup: inc/logo-link.php).
Das Logo ist kein Bild, sondern das Hintergrundbild 1_Zaeske.svg am
Spalten-Wrapper, links oben, background-size: auto. Das SVG hat nur eine
viewBox (534.05 × 842.89) und keine feste Grösse – der Browser skaliert es
deshalb auf die Höhe der Fläche. Der Link übernimmt genau das: volle Höhe,
Breite aus demselben Seitenverhältnis. Er deckt so auf jedem Breakpoint
nur das Logo ab, nicht die ganze (viel breitere) Spalte.
────────────────────────────────────────────────────────────────────── */
.zaeske-logo-link {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
aspect-ratio: 534.05 / 842.89;
}
/* Auf dem Handy ist das Logo nur rund 22 × 35px gross – zu knapp für den
Finger. Unsichtbar 10px Trefferfläche ringsum (≈ 42 × 55px); um das Logo
herum liegt nichts anderes Klickbares. */
.zaeske-logo-link::before {
content: "";
position: absolute;
inset: -10px;
}
.zaeske-logo-link:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 6px;
}
/* ──────────────────────────────────────────────────────────────────────
Footer auf dem Handy: Adresse schob sich neben die KONTAKT-Spalte.
Zwei Ursachen in der generierten Block-CSS der Footer-Section:
1. Das seitliche Padding ist nur im Desktop-Breakpoint gesetzt
(padding: 50px 100px 80px). Die Tablet-/Mobile-Overrides ändern
ausschliesslich oben/unten, die 100px links/rechts bleiben stehen.
Auf 375px Gerätebreite blieben so 175px Inhaltsbreite übrig —
daher die harten Umbrüche mitten in Strasse und Telefonnummer.
2. Die Spaltenbreiten ergeben unter 767px zusammen genau 100%:
Menü-Spalten 53%, Adress-Spalte 47%. Im flex-wrap passt die
Adresse damit noch auf die Zeile der KONTAKT-Spalte und stellt
sich neben das Menü. (Auf Tablet stehen alle auf 50% — dort
funktioniert das 2x2-Raster.)
Beides wird hier auf Property-Ebene korrigiert: volle Breite für alle
Spalten (die Menülisten sind zu lang für zwei Spalten auf 335px) und
ein Padding, das zur Gerätebreite passt.
Selektor bewusst ohne die generierte guten-*-ID: letzte Section im
Post-Content. Die generierten Klassen sind seitenübergreifend identisch
(gemeinsames Pattern), ändern sich aber bei jeder Block-Bearbeitung;
deshalb der strukturelle Selektor.
:last-of-type statt :last-child: auf der Startseite und 13 Projektseiten
(z. B. /dernsche-hoefe-wiesbaden/) steht hinter dem Footer noch ein
leerer Absatz-Block (). Der Footer war
dort nicht mehr das letzte Kind, keine der Footer-Regeln griff — auf dem
Handy stand wieder die Adresse neben KONTAKT, mit 100px Seitenrand.
:last-of-type zählt nur die -Geschwister; der letzte davon ist auf
allen Seiten der Footer (freistehende Überschriften sind