/*
Projekt       : Steuerkanzlei Metzger
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentytwentyfive" für die Website "steuerkanzlei-metzger.de"
Author:         Datenwege Informatik
Author URI:     https://Datenwege-Informatik.de
Template:       twentytwentyfive
Version:        1.0
Historie
   24.01.26  Gernot Daum  Beginn der Implementierung
*/


/* Fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2'),
       url('assets/fonts/Inter-Regular.woff') format('woff'),
       url('assets/fonts/Inter-Regular.ttf') format('truetype'),
       url('assets/fonts/Inter-Regular.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Inter Medium';
  font-style: normal;
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2'),
       url('assets/fonts/Inter-Medium.woff') format('woff'),
       url('assets/fonts/Inter-Medium.ttf') format('truetype'),
       url('assets/fonts/Inter-Medium.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Inter Bold';
  font-style: normal;
  src: url('assets/fonts/Inter-Bold.woff2') format('woff2'),
       url('assets/fonts/Inter-Bold.woff') format('woff'),
       url('assets/fonts/Inter-Bold.ttf') format('truetype'),
       url('assets/fonts/Inter-Bold.eot') format('embedded-opentype');
}


/* Konstanten */
body {
	/*   Schriften */
	--wp--preset--font-family--system-font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--wp--preset--font-family--system-font);
	--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(20pt, 2.2vw, 32pt);
  --wp--preset--font-size--xx-large: clamp(24pt, 2.6vw, 40pt);
  --wp--preset--font-size--huge: clamp(36pt, 4vw, 54pt);
	font-size: var(--wp--preset--font-size--medium);

  /*   Breiten und Abstände */
  --global--spacing-unit-fixed: 15px;
  --global--spacing-unit: clamp(4pt, 0.5vw, 8pt);
  --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;
  --mtz-button-size: 24px;

  --street-width: 1440px;
  --responsive--street-width: min(calc(100vw - var(--default-outer-spacing)), var(--street-width));
  --constriction-width: 1280px;
  --responsive--constriction-width: min(calc(100vw - var(--default-outer-spacing)), var(--constriction-width));
  --responsive--content-width: var(--responsive--constriction-width);
  --narrow-width: 960px;
  --responsive--narrow-width: min(calc(100vw - var(--default-outer-spacing)), var(--narrow-width));
  --single-track-width: 800px;
  --responsive--single-track-width: min(calc(100vw - var(--default-outer-spacing)), var(--single-track-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}

/*   Diverse Standards */
body {hyphens: auto}
h1, h2, h3, h4, h5, h6, .site-title {
	font-family:'Inter Medium', sans;
	font-weight: normal;
  hyphens: none
}
h1 {font-size: var(--wp--preset--font-size--x-large)}
h2 {font-size: var(--wp--preset--font-size--large)}
h3 {font-size: var(--wp--preset--font-size--regular)}
a {color: var(--wp--preset--color--accent-3); text-decoration: none}
a:hover {text-decoration: underline}
strong {font-family:'Inter Bold', sans; font-weight: normal}
.cv .wp-block-column:first-child {max-width: 360px}
.small1 {display: none}
.listcaption {margin-bottom: 4px}
.listcaption + * {margin-top: 4px; margin-block-start: 4px}
:root :where(.wp-element-button, .wp-block-button__link) {
	background-color: var(--wp--preset--color--accent-3)
}
#content :where(.wp-element-button:hover, .wp-block-button__link:hover) {
  background-color: var(--wp--preset--color--accent-2);
  text-decoration: none
}

/*    Seitenbreiten */
#content .narrow {max-width: 960px; margin-left: auto; margin-right: auto}
#content .single-track {max-width: 800px; margin-left: auto; margin-right: auto}
#content .narrow.left, #content .single-track.left {margin-left: 0}

 /* Kopf */
#masthead > * {
	max-width: var(--responsive--content-width);
	margin-left: auto;
	margin-right: auto
}
#masthead .wp-block-navigation__submenu-container {min-width: 240px}
#masthead a {padding: var(--global-seam)}
#masthead a:hover, #masthead .current-menu-ancestor > a, #masthead .current-menu-item > a {
	color: var(--wp--preset--color--accent-3);
  text-decoration: none
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 36px;
	height: 36px
}
.wp-block-navigation__responsive-container-close svg {
	padding-right: var(--global--spacing-unit)
}
#masthead nav {z-index: 10}

/* Fuß */
footer {
	margin-top: 0;
	background: var(--wp--preset--color--accent-4)
}
#footer > * {
	max-width: var(--responsive--content-width);
	margin-left: auto;
	margin-right: auto
}
#footer .valuepairs.cvdata {max-width: 360px}
#footer a {text-decoration: none}
#footer a:hover, #footer .current-menu-item a {color: var(--wp--preset--color--accent-3)}
footer, #footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small)
}
#footer .closure > * {
	max-width: var(--responsive--constriction-width);
	margin: 0 auto;
	padding-top: calc(1.5 * var(--global--spacing-vertical));
	padding-bottom: calc(1.5 * var(--global--spacing-vertical))
}

/* Inhalt */

/*   Abschnitte */
#content .street, #content .constriction, #content .single-track {
	margin-left: auto !important;
	margin-right: auto !important;
}
#content .street.left, #content .constriction.left, #content .single-track.left
{margin-left: 0 !important}
#content .street.right, #content .constriction.right, #content .single-track.right
{margin-right: 0 !important}
#content .street {max-width: var(--responsive--street-width)}
#content .constriction {max-width: var(--responsive--constriction-width)}
#content .single-track {max-width: var(--responsive--single-track-width)}
.entry-content > * {
	width: var(--responsive--constriction-width);
  margin-left: auto;
  margin-right: auto
}
#content .entry-content > .narrow.left {
	width: var(--responsive--narrow-width);
	margin-left: 0 !important
}
#content section {
	margin-top: calc(3 * var(--global--spacing-vertical));
	margin-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))
}
#content section:first-child, #content article:first-child
{margin-top: var(--global--spacing-vertical)}
#content section:last-child , #content article:last-child
{margin-bottom: var(--global--spacing-vertical)}
.coloured {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none
}
#content section.coloured, #content article.coloured {
	margin-top: 0;
	margin-bottom: 0
}
#content section.coloured {
	padding-top: calc(3 * var(--global--spacing-vertical));
	padding-bottom: calc(3 * var(--global--spacing-vertical))
}
#content article.coloured {
	padding-top: calc(1.5 * var(--global--spacing-vertical));
	padding-bottom: calc(1.5 * var(--global--spacing-vertical))
}
#content section.coloured:first-child, #content article.coloured:first-child
{padding-top: var(--global--spacing-vertical)}
#content section.coloured:last-child , #content article.coloured:last-child
{padding-bottom: var(--global--spacing-vertical)}
.coloured > * {
	width: var(--responsive--constriction-width);
  margin-left: auto;
  margin-right: auto
}
.coloured.grey {background: var(--wp--preset--color--accent-5)}

/*   Überlagerungen */
.overlay-anchor {position: relative}
#content .overlay-anchor figure {margin-bottom: 0}
.overlay {
	position: absolute;
	width: 100%;
	max-width: none;
	top: 0;
	left: 0;
	margin: 0
}

/*   Illustrierte Textbereiche */
.pictured-text figure {width: 50%; max-width: 320px}
.pictured-text figure.left {
	float: left;
  padding: var(--global-seam) var(--global--spacing-medium) var(--global--spacing-small) 0
}
.pictured-text figure.right {
	float: right;
  padding: var(--global-seam) 0 var(--global--spacing-small) var(--global--spacing-medium)
}

/*   Kachelbereoiche und -navigationen */
.card-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0
}
.card {margin: 0; width: calc(33.33% - 2px)}
.card figcaption {
	font-size: var(--wp--preset--font-size--medium);
	font-variant: small-caps;
	text-align: center
}
.navigation {max-width: var(--narrow-width)}
.navigation .card {
	background: var(--wp--preset--color--accent-5);
  border: 1px solid var(--wp--preset--color--accent-4);
}
.navigation .card:hover {background: var(--wp--preset--color--accent-1)}
.navigation .card a {
	display: block;
  max-width: 240px;
  margin: var(--global--spacing-small) auto 0 auto
}
.portraits .card {width: calc(25% - var(--global-seam))}
.portraits figcaption {margin-bottom: 0}
.portraits p {
	margin-top: var(--global-seam);
	padding: 0 var(--global--spacing-unit) var(--global--spacing-unit) var(--global--spacing-unit);
	font-size: var(--wp--preset--font-size--small);
	text-align: center
}

#mastheadx {display: none}
/* Kontaktwidget */
.floating-contactdata, .floating-contact-image {
	position: fixed;
	z-index: 1
}	
.floating-contact-image {
	z-index: 2;
	bottom: 80%;
	right: 0;
	opacity: 1;
	transition: bottom 0.6s, right 0.6s, opacity 1.2s
}
.floating-contact-image.hidden {
	bottom: 10%;
	right: 60%;
  opacity: 0 
}
.floating-contact-image.open {display: none}
.floating-contact-image figure {
	max-width: 120px;
	margin-left: auto;
	margin-right: var(--global--spacing-medium);
	background: var(--wp--preset--color--base);
	cursor: pointer
}
.floating-contactdata {
	right: var(--global--spacing-unit);
	width: 33.33%;
	min-width: 360px;
	max-width: 520px
}
.maplink {max-width: var(--global--spacing-x-large)}
.floating-contactdata .contact-container {overflow: hidden}
.floating-contactdata .content {
	width: 200%;
	margin-left: 100%;
	padding: var(--global--spacing-medium);
	background: var(--wp--preset--color--accent-5);
	border: 1px solid;
	transition: all 0.6s
}
.floating-contactdata .content.open {
	width: 100%;
	margin-left: 0;
}
.floating-contactdata .content, #footer .content {gap: var(--global-seam)}
#footer .content {
	opacity: 1;
	transition: all 0.6s
} 
#footer .content.hidden {opacity: 0}	
.contact-page .floating-contactdata, .contact-page .floating-contact-image {display: none}
.overlay.close-button {
	max-width: var(--mtz-button-size);
	left: initial;
	top: var(--global-seam);
	right: var(--global-seam);
}
.close-button svg {
	display: none;
  width: var(--mtz-button-size);
  height: var(--mtz-button-size)
}
.close-button svg.open {display: block}

/*   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;
	width: calc(30% - var(--global--spacing-unit));
	max-width: calc(20 * var(--global--spacing-unit))
}
.valuepairs.cvdata .name {max-width: calc(10 * var(--global--spacing-unit))}
.floating-contactdata .name {	max-width: calc(10 * var(--global--spacing-unit))}
.valuepairs .value {width: calc(70% - var(--global--spacing-unit))}

/*   Videos */
.digitaler-pionier {max-width: 360px}

/*   Rechtliche Seiten */
.legal #content .entry-content {
  max-width: var(--responsive--content-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  font-size: var(--wp--preset--font-size--small)
}
.legal #content .entry-content > * {
	max-width: var(--single-track-width);
	margin-left: 0 !important;
}
.legal .wp-block-post-title {
	margin-bottom: calc(var(--global--spacing-vertical));
	font-size: var(--wp--preset--font-size--x-large)
}
.legal h1 {font-size: var(--wp--preset--font-size--large)}
.legal h2 {
	margin-top: var(--global--spacing-vertical);
	font-size: var(--wp--preset--font-size--regular)
}
.legal h3 {font-size: var(--wp--preset--font-size--medium)}
.legal h1, .legal h2, .legal h3 {text-align: left}
.legal .valuepairs .name {width: calc(40% - 12px); max-width: 80px}
.legal .valuepairs .value {width: calc(60% - 12px)}

/*   Google Maps */
div#googleMap {width: 100%; height: 30em; margin: 15px auto}


/* Responsive */

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

/*   Tablett Landscape */
@media only screen and (max-width: 960px) {
	#content .wide1 {display: none}
	#content .small1 {display: initial}
	#content div.small1 {display: block}
	.card {width: calc(50% - 2px)}

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
	.wp-block-site-logo {
		width: 80%;
		max-width: 360px
	}
  .portraits .card {width: calc(50% - var(--global-seam))}
}

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

/*   Smartphone */
@media only screen and (max-width: 480px) {
	.card {width: 100%}
	#content .wp-block-column.curtate {max-width: 80%}
  .portraits .card {width: 100%; max-width: 320px}
}

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