/*
Projekt       : Sabine Strecker Communications
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentytwentyfive" für die Website "sabinestrecker.com"
Author:         Datenwege Informatik
Author URI:     https://Datenwege-Informatik.de
Template:       twentytwentyfive
Version:        1.0
Historie
   24.12.25  Gernot Daum  Beginn der Implementierung
*/


/* Fonts */

/* Rubik Light */
@font-face {
  font-family: 'Rubik Light';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/Rubik-Light.woff2') format('woff2'),
       url('fonts/Rubik-Light.woff') format('woff'),
       url('fonts/Rubik-Light.ttf') format('truetype'),
       url('fonts/Rubik-Light.svg#Rubik-Light') format('svg');
}
/* Rubik Regular */
@font-face {
  font-family: 'Rubik Regular';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/Rubik-Regular.woff2') format('woff2'),
       url('fonts/Rubik-Regular.woff') format('woff'),
       url('fonts/Rubik-Regular.ttf') format('truetype'),
       url('fonts/Rubik-Regular.svg#ralewaylight') format('svg');
}
/* Rubik Medium */
@font-face {
  font-family: 'Rubik Medium';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/Rubik-Medium.woff2') format('woff2'),
       url('fonts/Rubik-Medium.woff') format('woff'),
       url('fonts/Rubik-Medium.ttf') format('truetype'),
       url('fonts/Rubik-Medium.svg#Rubik-Medium') format('svg');
}
/* Rubik Bold */
@font-face {
  font-family: 'Rubik Bold';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/Rubik-Bold.woff2') format('woff2'),
       url('fonts/Rubik-Bold.woff') format('woff'),
       url('fonts/Rubik-Bold.ttf') format('truetype'),
       url('fonts/Rubik-Bold.svg#Rubik-Bold') format('svg');
}

body {
	/*   Schriften */
	--wp--preset--font-size--x-small: clamp(9pt, 0.7vw, 12pt);
	--wp--preset--font-size--small: clamp(10pt, 0.8vw, 13pt);
  --wp--preset--font-size--medium: clamp(11pt, 1.1vw, 16pt);
  --wp--preset--font-size--regular: clamp(12pt, 1.25vw, 18pt);
  --wp--preset--font-size--large: clamp(16pt, 1.7vw, 24pt);
  --wp--preset--font-size--x-large: clamp(24pt, 2.6vw, 40pt);
  --wp--preset--font-size--xx-large: clamp(30pt, 3.2vw, 48pt);
  --wp--preset--font-size--huge: clamp(36pt, 4vw, 54pt);
	font-family: 'Rubik Light', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: var(--wp--preset--font-size--medium);

  /*   Breiten und Abstände */
  --global--spacing-unit: 15px;
  --global--spacing-small: var(--global--spacing-unit);
  --global--spacing-medium: calc(2 * var(--global--spacing-unit));
  --global--spacing-large: calc(3 * var(--global--spacing-unit));
  --global--spacing-x-large: calc(4 * var(--global--spacing-unit));
  --global--spacing-huge: calc(6 * var(--global--spacing-unit));
  --global--spacing-horizontal: var(--global--spacing-unit);
  --global--spacing-vertical: calc(2 * var(--global--spacing-unit));
  --global--spacing-section: calc(3 * var(--global--spacing-vertical));
  --default-outer-margin-mult: 4;
	--default-outer-margin: calc(var(--default-outer-margin-mult) * var(--global--spacing-horizontal));
	--default-outer-spacing: calc(2 * var(--default-outer-margin));
  --global-seam: 6px;

  --street-width: 1440px;
  --constriction-width: 1120px;
  --single-track-width: 800px;
  --responsive--street-width: min(calc(100vw - var(--default-outer-spacing)), var(--street-width));
  --responsive--constriction-width: min(calc(100vw - var(--default-outer-spacing)), var(--constriction-width));
  --responsive--single-track-width: min(calc(100vw - var(--default-outer-spacing)), var(--single-track-width));
  --responsive--content-width: var(--responsive--constriction-width);
  --margin-street: max(var(--default-outer-margin), calc((100vw - var(--street-width)) / 2));
  --margin-constriction: max(var(--default-outer-margin), calc((100vw - var(--constriction-width)) / 2));
  --wp--style--global--content-size: var(--constriction-width);
}

/* Allgemein */

/* 	 Theme Reset */
body {padding: 0}	
body .wp-site-blocks > * {	
	max-width: var(--responsive--content-width);
  margin-left: auto;
  margin-right: auto;
}
:where(.wp-site-blocks :focus) {outline: none}
:root :where(.is-layout-constrained) > * {margin-top: var(--global--spacing-small)}

/*   Diverse Standards */
.small1 {display: none}
#content h1, #content .entry-title {font-size: var(--wp--preset--font-size--regular)}
#content h2, #content .entry-subtitle {
	font-family: 'Rubik Light', sans; 
	font-size: var(--wp--preset--font-size--large)
}
#content h3 {
	margin-top: var(--global--spacing-medium);
	font-size: var(--wp--preset--font-size--regular)
}
#content h1.wp-block-heading + .wp-block-heading, #content .entry-title + .entry-subtitle 
{margin-top: 0}
#content h3, #content h4, #content h5, #content h6 {font-family: 'Rubik Regular', sans}

strong {font-family: 'Rubik Medium', sans;}
a {text-decoration: none; color: var(--wp--preset--color--accent-1)}
a:hover {text-decoration: underline}
.listcaption {margin-bottom: 4px}
.listcaption + * {margin-top: 4px; margin-block-start: 4px}
.icon-svg {
	width: 24px;
	stroke: var(--wp--preset--color--accent-1);
	stroke-width: 2;
	stroke-linecap: round;
	fill: var(--wp--preset--color--base);
	transition: fill 0.3s
}
.icon-svg:hover {fill: var(--wp--preset--color--accent-2) }

/* Kopf */
body .wp-site-blocks header {
	max-width: none;
}

/* Fuß */
body .wp-site-blocks footer {
	max-width: none;
	background: var(--wp--preset--color--accent-5)
}
.site-info a:hover {
	text-shadow: 1px 0 var(--wp--preset--color--accent-1), 1px 0 var(--wp--preset--color--accent-1)
}
footer nav { text-transform: uppercase}
footer .closure, #footer .closure a {font-size: var(--wp--preset--font-size--small)}
#footer .closure > * {
	max-width: var(--responsive--content-width);
	margin: 0 auto;
	padding-top: calc(1.5 * var(--global--spacing-vertical));
	padding-bottom: calc(1.5 * var(--global--spacing-vertical))
}
#footer .closure a {text-decoration: none}
#footer .wp-block-getwid-social-links__list {
	display: flex;
	justify-content: center
}

/* 		Kontakt CTA */
#kontakt {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
#kontakt .tile-container {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
              url('/wp-content/uploads/2025/12/Footer.jpg') center/cover no-repeat;
  display: grid;
  place-items: center;
  border-radius: var(--sga-border-radius);
  padding: 10%;
}
.dark-tile {
  width: 100%;
  max-width: 360px;
  background: var(--wp--preset--color--accent-6);
  color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--wp--preset--color--accent-4);
  text-align: center;
  transition: transform 0.2s ease
}
.dark-tile .badge {
	display: block;
	width: 50%;
	margin: 0 auto var(--global--spacing-unit) auto;
  padding: var(--global--spacing-unit);
  color: var(--wp--preset--color--accent-5);
  background: var(--wp--preset--color--accent-1);
  border-radius: var(--sga-border-radius);
  font-size: var(--wp--preset--font-size--small);
  font-weight: bold;
  text-transform: uppercase;
}
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  font-weight: bold;
  padding: 12px;
  border-radius: var(--sga-border-radius);
  transition: all 0.3s ease;
}
.cta-button:hover {
	opacity: 0.7;
	text-decoration: none
}
.cta-button .icon-svg {
	position: absolute;
	left: 0;
	padding-left: var(--global--spacing-unit)
}


/* Navigation */
.wp-block-navigation-item a:hover, .current-menu-item > a {
	text-shadow: 1px 0 #000, 1px 0 #000
}
.wp-block-navigation-item a:hover {text-decoration: none}

/* Inhalt */
.wp-block-getwid-accordion__header {
	color: white;
	background: var(--wp--preset--color--accent-1)
}
.wp-block-getwid-accordion__header a {
	color: white;
}
.wp-block-getwid-accordion .wp-block-getwid-accordion__header {
	box-sizing: border-box
}
#zertifikate img {
	display: block;	
	margin: 0 auto; 
	width: 100%;
	max-width: 400px
}

/*   Abschnitte */
body:not(.home) .entry-content >* {
	max-width: var(--single-track-width);
	margin-right: 0 !important
}
#content section {
	padding-top: calc(3 * var(--global--spacing-vertical));
	padding-bottom: calc(3 * var(--global--spacing-vertical))
}
#content article {
	margin-top: calc(1.5 * var(--global--spacing-vertical));
	margin-bottom: calc(1.5 * var(--global--spacing-vertical))
}

/*   Kacheln */
.tilea1 img {vertical-align: top}
.tilea1 {position: relative; overflow: hidden; width: 100%}
.tilea1 .anim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 0;
	transition: background 1s
}
.tilea1 figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	height: var(--global--spacing-large); 
	margin: 0;
	padding: var(--global-seam) var(--global--spacing-unit);
	font-size: var(--wp--preset--font-size--regular);
	color: white;
	background: var(--wp--preset--color--accent-6)
}
.tilea1 .anim .text {
	display: block;
	margin-top: -100%;
	height: 100%;
	padding: var(--global-seam) var(--global--spacing-unit);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.1;
	color: white;
	background: var(--wp--preset--color--accent-6);
	opacity: 0;
	transition: all 0.5s;
}
#content .tilea1 .anim .text a {
	display: block;
	height: 100%;
	color: white;
	text-decoration: none
}
.tilea1:hover .anim .text {
	margin-top: var(--global--spacing-large);
	opacity: 1
}

/*  	Pseudo Tabellen  */
.valuepairs {display: flow-root}
.valuepairs div {float: left; margin: 0}
.valuepairs .line {width: calc(100% - var(--global--spacing-unit))}
.valuepairs .line > div {padding: 0 var(--global--spacing-unit) var(--global-seam) 0}
.valuepairs .line > div:last-child {padding-right: 0}
.valuepairs .line:last-child > div {padding-bottom: 0}
.valuepairs .name {
  clear: left;
  margin: 0 !important;
  width: calc(30% - var(--global--spacing-unit));
  max-width: calc(6 * var(--global--spacing-unit))
}
.valuepairs .value {width: calc(70% - var(--global--spacing-unit))}

/*   Rechtliche Seiten */
.legal .wp-block-post-title {
	margin-bottom: calc(var(--global--spacing-vertical));
	font-size: var(--wp--preset--font-size--x-large)
}
.legal h1, .legal h2, .legal h3 {text-align: left}
.legal #content p, .legal #content li {font-size: var(--wp--preset--font-size--small)}
.legal .valuepairs .name {width: calc(40% - 12px); max-width: 280px}
.legal .valuepairs .value {width: calc(60% - 12px)}

/* Responsive */

/*   Kleiner Bildschirm */
@media only screen and (max-width: 1120px) {
}

/*   Tablett Landscape */
@media only screen and (max-width: 960px) {
	body {
    --default-outer-margin-mult: 3;
  }
	#content .wide1 {display: none}
	#content .small1 {display: initial}
	#content div.small1 {display: block}
}

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
}

/*   Smartphone groß */
@media only screen and (max-width: 600px) {
  body {
    --default-outer-margin-mult: 2;
  }
}

/*   Smartphone */
@media only screen and (max-width: 480px) {
}

/*   Smartphone klein */
@media only screen and (max-width: 400px) {
  body {
    --default-outer-margin-mult: 1;
  }
}