/*!
Theme Name: AtSch-2025
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: atsch-2025
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

AtSch-2025 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/




@font-face {
font-family: "AcarajeVariable";
src: url('font/font.woff2') format('woff2'), url('font/font.woff') format('woff');
font-weight: 100 900;
font-display: swap;
font-style: normal;
}

.font-100 {
  font-weight: 100;
  font-variation-settings: 'wght' 100;
}

.font-200 {
  font-weight: 200;
  font-variation-settings: 'wght' 200;
}

.font-300 {
  font-weight: 300;
  font-variation-settings: 'wght' 300;
}

.font-400 {
  font-weight: 400;
  font-variation-settings: 'wght' 400;
}

.font-500 {
  font-weight: 500;
  font-variation-settings: 'wght' 500;
}

.font-600 {
  font-weight: 600;
  font-variation-settings: 'wght' 600;
}

.font-700 {
  font-weight: 700;
  font-variation-settings: 'wght' 700;
}

.font-800 {
  font-weight: 800;
  font-variation-settings: 'wght' 800;
}

.font-900 {
  font-weight: 900;
  font-variation-settings: 'wght' 900;
}



.title-home {
  position: absolute;
  margin-top: -100px;
  color: #9c4359;
  z-index: -1;
}

/* * * * * * * * * */
/* * * Portfolio Loop * * * */
/* * * * * * * * * */

/* Container für den Query Loop */
.wp-block-query.zweispaltig-loop .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 Spalten */
    gap: 20px;
}

/* Stil für jedes einzelne Beitragselement (li) */
.wp-block-query.zweispaltig-loop .wp-block-post {
    display: flex;
    flex-direction: column; /* Standard: Bild oben, Titel unten */
}

/* Auf ungeraden Zeilen: Titel oben, Bild unten */
.wp-block-query.zweispaltig-loop .wp-block-post:nth-child(odd) .wp-block-post-featured-image {
    order: 2; /* Bild nach dem Titel */
}

.wp-block-query.zweispaltig-loop .wp-block-post:nth-child(odd) .wp-block-post-title {
    order: 1; /* Titel kommt vor dem Bild */
}

/* Auf geraden Zeilen: Bild oben, Titel unten */
.wp-block-query.zweispaltig-loop .wp-block-post:nth-child(even) .wp-block-post-featured-image {
    order: 1; /* Bild kommt vor dem Titel */
}

.wp-block-query.zweispaltig-loop .wp-block-post:nth-child(even) .wp-block-post-title {
    order: 2; /* Titel kommt nach dem Bild */
}

/* Stil für Bild (quadratisch) und Titel */
.wp-block-query.zweispaltig-loop .wp-block-post-featured-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* Erzwingt quadratische Bilder */
    overflow: hidden;
}

.wp-block-query.zweispaltig-loop .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Schneidet das Bild zu */
}

.wp-block-query.zweispaltig-loop .wp-block-post-title {
    text-align: center; /* Titel zentrieren */
    width: 100%;
}


/* * * * * * * * * */
/* * * FONTS * * * */
/* * * * * * * * * */


p {
  color: #fff;
  font-variation-settings: 'wght' 100;
  font-weight: 100;
  letter-spacing: 0.5px;
  word-spacing: 1px;
}

a, A:link    {
  text-decoration: none;
  color: #dae9c3;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  /* border-bottom: 2px dotted rgba(218, 233, 195, 0.5); */
}

.site-header a, .site-header A:link  {
  border-bottom: none;

}

A:visited {
  text-decoration: none;
  color: #cddbb7;
}

A:active  {
  text-decoration: none;
  color: #cddbb7;
}

body {
  padding: 0 0px;
  margin: 0 auto;
  background-color: #9c4359;
  font-family: "AcarajeVariable";
  font-variation-settings: 'wght' 100;
  font-weight: 100;
  font-size: 18px;
}

.dunkler {
  background-color: #8f243f;
  height: 100%;
}

.h1-home {
  z-index: -1;
}

h1 {
  font-size: 1em;
  font-weight: 100;
  font-variation-settings: 'wght' 100;
  color: #fff;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  line-height: 1.2;
}

h2 {
  font-family: "AcarajeVariable";
  font-size: 25px;
  font-weight: 600;
  font-variation-settings: 'wght' 600;
  color: #dae9c3;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  line-height: 1.4;
  margin-left: -2px !important;
}

h3 {
  font-weight: 600;
  font-variation-settings: 'wght' 600;
  color: #dae9c3;
  padding-top: 20px;
  margin-block-end: .7em;
  margin-block-start: 1.3em;
}

footer h3 {
  font-variation-settings: 'wght' 100;
  font-weight: 100;
  padding-top: 0px;
  margin: 0;
  margin-top: 18px;
}





/* * * * * * * * * */
/* * * LAYOUT * * * */
/* * * * * * * * * */

.top.container, #desktop > .container, #mobile > .container {
    padding: 0 48px;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 72px 48px;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 5em;
}

.wp-block-columns {
  padding-bottom: 6em;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0 10px;
  grid-auto-rows: calc(50vh - 110px);
  grid-template-areas:
    "a a a a a a a a"
    "b b b b b b b b";
  align-items: start;
}

.top {
  grid-area: a;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0 10px;
  grid-auto-rows: calc(50vh - 80px);
  grid-template-areas:
  "a a a a b b b b"
}



/* LOGO */

.logo {
  grid-area: a;
  width: 180px;
  padding-top: 16px;
}

.top-nav img {
  max-width: 220px;
}




.einleitungstext {
  grid-area: b;
  padding-block-start: 12px;
  padding-block-end: 48px;
  padding-right: 14px;
  align-self: self-end;
}

#desktop, #mobile {
  grid-area: b;
  align-self: end;
  padding-bottom: 38px;
}

#ausblenden {
  min-height: 400px;
  will-change: width;
  opacity: 1;
}

.grafik {
  grid-area: c;
}

.kommunikation {
  grid-area: d;
}

.arbeiten .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  grid-template-areas: "a b";
}

.arbeiten img {
  padding-top: 67px;
  /* position: absolute; */
}

.arbeiten .overlay {
  width: 100%;
  position: relative;
}

.arbeiten p {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 100;
  font-variation-settings: 'wght' 100;
}

h2 {
  margin-block-start: 55px;
  margin-block-end: 25px;
  /* font-weight: 600; */
  line-height: 1.1;
  font-size: 50px;
  /* text-transform: uppercase; */
}


.home h2.text-normal {
  font-weight: 100;
  font-variation-settings: 'wght' 100;
  text-transform: none;
  color: #fff;
  margin-top: 0px;
  margin-bottom: 8px;
  margin-right: 50px;
}

.arbeiten:nth-child(odd) h2, .arbeiten:nth-child(odd) p {
  padding-right: 60px;
}

 .arbeiten:nth-child(odd) p {
  padding-right: 60px;
  padding-left: 3px;
}

.arbeiten:nth-child(even) h2, .arbeiten:nth-child(even) p {
  padding-left: 60px;
}

.arbeiten:nth-child(even) p {
  padding-left: 63px;
}

.webdesign {
  grid-area: e;
}

img {
  width: 100%;
  /* max-height: 520px; */
  object-fit: cover;
}




/* * * * * * * * * */
/* * * Image * * * */
/* * * * * * * * * */

div.col-2.img_slider {
    padding-bottom: 10px;
    max-width: 975px;
    width: 100%;
    height: auto;
  }

.img_holder {
  position: absolute;
  opacity: 0;
  object-fit: cover;
}

@keyframes slide {

  0% {
    opacity: 0;
  }
  5%{
    opacity: 1;
  }
  30%{
    opacity: 1;
  }
  35%{
    opacity: 0;
  }
}

.img_holder:first-child{
  -webkit-animation: slide 9s linear infinite;
  -moz-animation: slide 9s linear infinite;
  animation: slide 9s linear infinite;
}

.img_holder:nth-child(2){
  -webkit-animation: slide 9s linear 3s infinite;
  -moz-animation: slide 9s linear 3s infinite;
  animation: slide 9s linear 3s infinite;
}

.img_holder:nth-child(3){
  -webkit-animation: slide 9s linear 6s infinite;
  -moz-animation: slide 9s linear 6s infinite;
  animation: slide 9s linear 6s infinite;
}





/* * * * * * * * * */
/* * * HEADER * * * */
/* * * * * * * * * */

.slogan {
  grid-area: a;
}

.adresse {
  grid-area: b;
}




/* * * * * * * * * */
/* * * FOOTER * * * */
/* * * * * * * * * */

.footer {
  grid-area: f;
  order: 6;
  align-self: end;
  /* margin-bottom: 50px; */
}

.footer .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  grid-template-areas:
  "a a b b";
  padding: 20px 48px;
}

.esmue {
  margin-left: 7px;
  margin-right: 7px;
}

.desktop-ausblenden {
  display: none;
}

.mobile-ausblenden {
  display: inline;
}




/* * * Badge * * * */
/* * * * * * * * * */

#wcb.carbonbadge{
  --b1:#0e11a8;
  --b2:#00ffbc;
  font-size:15px;
  text-align:center;
  color:var(--b1);
  line-height:1.15;
  display: grid;
  grid-template-columns: auto 1fr;
  padding-top: 10px;
  margin-left: -3px;
  }

#wcb_2 {
  justify-self: start;
  padding-left: 5px;
}

#wcb.carbonbadge sub{
  vertical-align:middle;
  position:relative;
  top:.3em;font-size:.7em
  }

#wcb #wcb_2,#wcb #wcb_a,#wcb #wcb_g{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-size:1em;
  line-height:1.15;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  text-decoration:none;
  margin:.2em 0
}

#wcb #wcb_a,#wcb #wcb_g{
  padding:.3em .5em;
  border:.13em solid var(--b2)
}

.slogan #wcb #wcb_g{
  border-radius:.3em 0 0 .3em;
  /* background: rgba(255, 255, 255, 0.7); */
  background: none;
  border-right:0;
  min-width:8.2em;
  border-color: rgba(0, 255, 188, 0.4);
  font-weight: 100;
  font-variation-settings: 'wght' 100;
}

#wcb #wcb_a{
  border-radius:0 .3em .3em 0;
  border-left:0;
  background:var(--b1);
  color:#fff;
  font-weight:600;
  font-variation-settings: 'wght' 600;
  border-color:var(--b1)
}

.slogan #wcb.wcb-d #wcb_a{
  color: rgba(14, 17, 168, 0.8);
  background: none !important;
  border-color: rgba(255, 255, 255, 0) !important;
}

#wcb.wcb-d #wcb_2 {
    color: #dae9c3 !important;
    letter-spacing: 0.5px;
}


#wcb.wcb-d #wcb_a {
  /* color: #a35061 !important; */
  color: #fff !important;
  font-size: 0.72em !important;
  /* background: #D1A8B0 !important;
  border-color: #D1A8B0 !important; */
  background: none !important;
  border-color: none !important;
  font-family: inherit;
  line-height: .8;
  /* border-top: 2px solid #D1A8B0 !important;
  border-bottom: 1px solid #D1A8B0 !important; */
  border-top: 0px solid none !important;
  border-bottom: 1px solid #fff !important;
  font-weight: normal !important;
  margin-top: 0px;
}

#wcb #wcb_g {
  /* color: #a35061 !important; */
  color: #fff !important;
  font-size: 0.72em !important;
  border: none !important;
  font-family: inherit !important;
  border-radius: none !important;
}

#wcb #wcb_g {
  margin-top: 2px !important;
}

#wcb.wcb-d #wcb_2 {
  font-family: inherit;
  font-size: 0.72em !important;
  border: none !important;
  border-radius: none !important;
}

#wcb.wcb-d #wcb_a {
  margin-top: -2px;
}

#wcb.wcb-d #wcb_a:hover {
    color: #000 !important;
}




/* NEWS */

.news .post-thumbnail {
  padding-bottom: 48px;
}

.news .entry-content, .news .entry-content p:first-child {
  margin: 0 !important;
}

.news .wp-block-post-date {
      margin-block-end: 15px;
}

.news > ul, .single > ul {
  margin: 0;
}

.news h2 {
    margin-block-start: 5px;
    margin-block-end: 40px;
}

.news a {
  border-bottom: 0px;
}

.news .entry-title {
  margin-bottom: 0.45em
}


/* Page-Templates */

.page-template-page-atelier h1, .page-template-page-grafik h1, .page-template-page-kommunikation h1, .page-template-page-webdesign h1 {
  margin-top: 28px;
}



/* * * * * * * * * */
/* * * SLOGAN * * * */
/* * * animiert * * */
/* * * * * * * * * */

.cls-1 {
  fill: #dae9c3;
  position: absolute;
  visibility: hidden;
  animation-name: fadeinOut;
  animation-duration: .5s;     /* = (fadingin + showing + fadingout) * numquotes */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.speed, .delay{
  width: 50px;
}

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
  animation-iteration-count: 6;
}


@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-12px);
  }
}



@keyframes fadeinOut {
  0% {
    opacity: 0;
  }
 33% {                      /* = fadingin / duration * 100% */
    opacity: .33;
  }
  66% {                     /* = (fadingin + showing + fadingout) / duration * 100% */
    opacity: 0.66;
  }
 100% {
    opacity: 1;
     visibility: visible;
  }
}

#grafik .cls-1 { animation-delay: 0s; }  /* delay = (n-1) / numquotes * duration */
#und .cls-1 { animation-delay: .2s; }
#web .cls-1 { animation-delay: .4s; }
#aus .cls-1 { animation-delay: .9s; }
#bern .cls-1 { animation-delay: 1.1s; }
#punkt .cls-1 {animation-delay: 1.3s; }
#kreativ .cls-1 { animation-delay: 1.6s; }
#konzipiert .cls-1  { animation-delay: 1.8s; }
#effizient .cls-1  { animation-delay: 2.3s; }
#realisiert .cls-1  { animation-delay: 2.5s; }






/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}


h1 {
	font-size: 1.4em;
	margin: 0.67em 0 1.45em;
}

/* Grouping content
	 ========================================================================== */

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}


pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

a {
	background-color: transparent;
}


abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}


b,
strong {
	font-weight: bolder;
}

/
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}


small {
	font-size: 80%;
}


sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */


button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}


button,
input {
	overflow: visible;
}


button,
select {
	text-transform: none;
}


button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}


button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}


button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}


fieldset {
	padding: 0.35em 0.75em 0.625em;
}


legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}


progress {
	vertical-align: baseline;
}


textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #fff;
  font-variation-settings: 'wght' 100;
  font-weight: 100;
  font-family: "AcarajeVariable" 'Helvetica', sans-serif;
	font-size: 22px;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
/* body {
	background: #fff;
} */

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 1.5em 0 ;
  padding-inline-start: 24px;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 600;
  font-variation-settings: 'wght' 600;

}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 0 0 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #dae9c3 !important;
}

a:visited {
	color: #dae9c3 !important;
}

a:hover,
a:focus,
a:active {
	color: #fff;
  outline: thin dotted;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}



/* Forms
--------------------------------------------- */

body .wp-block-button__link {
    color: #9c4359 !important;
    background-color:  #dae9c3;
    padding: calc(.667em + 4px) calc(1.333em + 6px);
    font-size: 1em;
}

body .wp-block-button__link:hover {
  background-color: #fff;
}

body .wp-block-button__link a, body .wp-block-button__link a:visited {
    color: #9c4359 !important;
}

.wp-block-buttons>.wp-block-button {
    margin-left: -7px;
    margin-top: 20px;
}


button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/





.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.home .site-main {
    max-width: 1600px;
    margin: 0 auto;
    /* padding: 180px 15px 0px;  */
    padding: 180px 0px;

}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	/* margin: 0 0 1.5em; */
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
  font-variation-settings: 'wght' 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}



/* MENU */

.menu-checkbox {
  display: none;
}

/* Hamburger */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto; /* Zentriert den Header */
  box-sizing: border-box;
}

.hamburger::before,
.hamburger::after,
.hamburger {
  content: "";
  background: white;
  height: 2px;
  width: 100%;
  position: absolute;
  transition: all 0.3s;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  top: 8px;
}

.hamburger {
  width: 40px !important;
  height: 24px;
  display: block;
  position: relative;
  cursor: pointer;
  z-index: 1001;
  background: none;
}


/* Kreuz bei aktiviertem Menü */
.menu-checkbox:checked + .hamburger {
  background: transparent;
}

.menu-checkbox:checked + .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-checkbox:checked + .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}


.fullscreen-menu {
  position: fixed;
  inset: 0;
  background: #9c4359;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 1000;
}

.menu-checkbox:checked ~ .fullscreen-menu {
  opacity: 1;
  visibility: visible;
}

.menu-top-menu-container li {
  font-size: 120px;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  list-style-type: none;
  display: inline-block;
  text-transform: uppercase;
  line-height: 1;
}

.menu-top-menu-container li:after {
  content: '• ';
  color: #dae9c3;
  position: relative;
  top: 34px; /* oder mehr/weniger, je nach Bedarf */
}





/* Beiträge 2-spaltig*/

/* Flexbox für Row */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 5em;
  box-sizing: border-box; /* Stellt sicher, dass Padding und Margin nicht die Breite überschreiten */
}

/* 100% Breite für kleinere Bildschirme */
.col-12 {
  width: 100%;
}

/* 50% Breite für größere Bildschirme */
.col-md-6 {
   width: calc(50% - 2.5em) !important;
  box-sizing: border-box; /* Stellt sicher, dass Padding und Margin nicht die Breite überschreiten */

}

/* Responsive: Einspaltig bei mobilen Bildschirmen */
@media all and (max-width: 768px) {
  .col-md-6 {
    width: 100%;
  }
}





.card {
  display: flex;
  flex-direction: column;
}

.card-featured-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.card-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 0 1.9rem 0px
}

.card-textbox {
  /* background-color: #f5f5f5; */
  padding: 0 0 1.5rem 0px;
  height: 50%; /* halbe Höhe des Bildcontainers */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  margin: 0;
  /* font-size: 1.2rem; */
}

.card-tags {
  margin: 0;
  font-size: 0.9rem;
  color: #777;
}

h3.card-title {
  margin-block-start: -10px;
  margin-block-end: 10px;
  font-family: "AcarajeVariable";
  font-size: 50px;
  font-weight: 600;
  font-variation-settings: 'wght' 600;
  color: #dae9c3;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  line-height: 1.2;
  margin-left: -2px !important;
}

.card a {
  border-bottom: 0px dotted rgba(218, 233, 195, 0.5);
}

.card-tags {
  color: #fff;
  font-variation-settings: 'wght' 100;
  font-weight: 100;
  margin-block-start: 5px;
  margin-block-end: 5px;
}


.einleitungstext h2 {
  font-size: 20px;
  line-height: 1.35;
  }




.single .entry-title {
  font-family: "AcarajeVariable";
  font-size: 50px;
  font-weight: 600;
  font-variation-settings: 'wght' 600;
  color: #dae9c3;
}

.single h2 {
  font-size: 34px;
  margin-block-start: 50px;
    margin-block-end: 20px;
}

.single .entry-header {
  margin-bottom: 70px;
}







/* * * * * * * * * */
/* * * Media * * * */
/* * * Query * * * */
/* * * * * * * * * */




@media all and (min-width: 600px) {

p, body, h1, footer h3 {
  font-size: 20px;
}

.entry-meta {
  font-size: 16px;
}


h2 {
  line-height: 1.2;
}

h3.card-title {
  margin-top:30px;
    font-size: 33px;
}


.wp-block-column > h2, .single .entry-title  {
  margin-block-start: -7px;
  font-size: 37px !important;
  }

  .card-container.title-first, .home .wp-block-column h2 {
    margin-top: 70px !important;
  }

  .home .wp-block-column h2.kein-top {
      margin-top: 17px !important;
  }
}






@media all and (min-width: 1260px) {

p {
  font-size: 22px;
  line-height: 1.45;
  }

.footer p, .footer h3 {
  font-size: 17px;
  margin: 0 auto;
}

h2 {
  font-size: 50px;
  line-height: 1.2;
  }

h3.card-title {
  font-size: 50px !important;
}

.wp-block-column > h2, .single .entry-title  {
  margin-block-start: -7px;
  font-size: 50px !important;
}

  .wp-block-column > p, body, p, .einleitungstext h2, h1 {
    font-size: 26px;
  }


}



@media screen and (min-width: 600px) {

  #desktop svg {
    display: block;
  }
  #mobile svg {
    display: none;
  }
}





@media screen and (min-width: 1390px) {

    #desktop svg {
      max-width: 1800px;
      margin-left: -8px;
    }
}






@media screen and (max-width: 600px) {

  .home .site-main {
      padding: 40px 0px;
  }

  :where(.wp-block-columns.is-layout-flex) {
      gap: 1.2em;
  }

.row {
   flex-direction: column;
   gap: 3.5em
 }

 .col-md-6 {
     width: 100% !important;
     box-sizing: border-box;
 }

.wp-block-columns {
  padding-bottom: 3em;
}

.site-header {
  padding: 18px 36px;
}

.container {
  padding: 24px 36px;
}

p, body {
  font-size: 18px;
  line-height: 1.5;
}

.page-template-page-atelier h1, .page-template-page-grafik h1, .page-template-page-kommunikation h1, .page-template-page-webdesign h1 {
  margin-top: 22px;
}

h1 {
  font-size: 21px;
  margin: 0.67em 0 1.25em;
  line-height: 1.2;
}

h2, h3.card-title {
  font-size: 28px;
  margin-block-start: 30px;
  line-height: 1.25;
}

.card-featured-image img {
    padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
}

/* Immer: Bild zuerst, Text danach */
.card-right, .home .wp-block-columns {
  order: -1;
}

.card-tags {
    font-size: 0.8rem;
}
.top.container, #desktop > .container, #mobile > .container {
    padding: 0 36px;
}
}



@media all and (max-width: 1150px) {
  .einleitungstext h2 {
    font-size: .8em;
    padding-left: 5px;
    line-height: 1.3;
  }
  .desktop {
    padding-bottom: 0px;
  }
  .wp-block-columns {
    gap: 2.5em;
}
p, body, h1, footer h3 {
  font-size: 18px !important;
}

.menu-top-menu-container li {
  font-size: 68px;
  line-height: 0.9;
}

.menu-top-menu-container li:after {
  top: 18px; /* oder mehr/weniger, je nach Bedarf */
}

}






@media screen and (max-width: 599px) {

  #mobile {
    padding-bottom: 10px;
  }

  #desktop svg {
    display: none;
  }

  #mobile svg {
    display: block;
    margin-left: -5px;
  }

  .top {
    grid-auto-rows: 11vh;
    grid-template-areas:
      "a a a a a a a a"
      "b b b b b b b b"
  }

  .wrapper {
    display: grid;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    grid-auto-rows: auto;
    grid-template-areas:
      "a a a a a a a a"
      "b b b b b b b b"
      "c c c c c c c c"
      "d d d d d d d d"
      "e e e e e e e e"
      "f f f f f f f f"
      "g g g g g g g g";
    align-items: start;
  }

  .col-2.text {
    padding-bottom: 40px;
  }

  .arbeiten h2 {
      margin-block-start: 15px;
      margin-block-end: 13px;
      line-height: 1.2;
      font-size: 26px;
  }

  .arbeiten img {
    padding-top: 22px;
  }

  .arbeiten:nth-child(odd) h2, .arbeiten:nth-child(odd) p,
  .arbeiten:nth-child(even) h2, .arbeiten:nth-child(even) p {
    padding: 0;
  }

  .grafik .container, #wcb.carbonbadge {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b";
  }

  .footer .container{
    gap: 0em;
  }

  .kommunikation .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "b"
      "a";
  }

  .webdesign .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b";
    }

  .kommunikation .container .col-2:nth-child(1) {
    grid-area: a;
  }

  .kommunikation .container .col-2:nth-child(0) {
    grid-area: b;
  }

  .logo {
    width: 140px;
  }

  .slogan {
    padding-top: 20px;
  }



  .desktop-ausblenden {
    display: inline;
  }

  .mobile-ausblenden {
    display: none;
  }

  .einleitungstext {
    padding-block-start: 20px;
    padding-bottom: 14px;
    padding-right: 0px;
    grid-area: a;
    align-self: normal;
  }
  .home h2.text-normal {
    margin-right: 0px;
}

#wcb_p {
      justify-self: start;
}

#wcb #wcb_2 {
  justify-self: start;
  padding-left: 0px;
  margin-left: -2px !important;
}
.menu-top-menu-container li {
  font-size: 36px;
  line-height: 0.9;
}

.menu-top-menu-container li:after {
  top: 9px; /* oder mehr/weniger, je nach Bedarf */
}

}

@media all and (max-width: 940px) {

.home h2.text-normal {
  margin-right: 5px;
}


  .footer .container  {
      grid-template-columns: 1fr;
      grid-template-areas:
        "a"
        "b";
        gap: 0em;
    }

}

@media all and (max-width: 1470px) {

.break {
  display: block;
}