/**
 * Theme Name:        Serene Studio
 * Theme URI:         
 * Description:       Ein minimalistisches, cleanes WordPress-Theme für Freelancer:innen und Solo-Selbstständige. Perfekt für moderne Portfolios, Angebotsseiten und Landingpages mit Fokus auf Ästhetik, Klarheit und Conversion. Extras: Lege dein eigenes Portfolio mit eigenständigen Kategorien an und zeige sie in mit einem eigenen Template (Portfolio-Übersicht). Nutze dein eigenes Hintergrundbild und eigene Farben.
 * Version:           1.0
 * Author:            Sarah Schwarick - special connection studio
 * Author URI:        https://special-connection-studio.de
 * Tags:              portfolio, freelancer, creative
 * Text Domain:       serenestudio
 * Domain Path:       /assets/lang
 * Tested up to:      6.8
 * Requires at least: 5.2
 * Requires PHP:      7.0
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */


/**
 *
 * directory
 * 
 * browser-reset
 * font-family (@font-face)
 * css-variables (:root)
 * basic elements
 * structure (layout grid)
 * header
 * navigation
 * content
 * sidebar
 * footer
 * templates
 * special content (plugins)
 * @media tablet
 * @media desktop
 *
 */


/**
 * browser-reset
 */

@import url(assets/css/normalize.css);

* {
   box-sizing: border-box; /* es gilt die Weite der Box, inklusive Margin & Padding */
}

/**
 * font-family (@font-face)
 */

/* public-sans-300 - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 300;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-300italic - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 300;
   font-style: italic;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-regular - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 400;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-italic - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 400;
   font-style: italic;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-600 - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 600;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-600italic - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 600;
   font-style: italic;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-700 - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 700;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-700italic - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 700;
   font-style: italic;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-800 - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 800;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* public-sans-800italic - latin_latin-ext */
@font-face {
   font-family: 'Public Sans';
   font-weight: 800;
   font-style: italic;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/public-sans-v20-latin_latin-ext-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* instrument-serif-regular - latin_latin-ext */
@font-face {
   font-family: 'Instrument Serif';
   font-weight: 400;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/instrument-serif-v4-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
   src: url('assets/fonts/instrument-serif-v4-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-regular.svg#InstrumentSerif') format('svg'); /* Legacy iOS */
}

/* instrument-serif-italic - latin_latin-ext */
@font-face {
   font-family: 'Instrument Serif';
   font-weight: 400;
   font-style: italic;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/instrument-serif-v4-latin_latin-ext-italic.eot'); /* IE9 Compat Modes */
   src: url('assets/fonts/instrument-serif-v4-latin_latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
   url('assets/fonts/instrument-serif-v4-latin_latin-ext-italic.svg#InstrumentSerif') format('svg'); /* Legacy iOS */
}

/* anton-regular - latin_latin-ext */
@font-face {
   font-family: 'Anton';
   font-weight: 400;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/anton-v26-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
   src: url('assets/fonts/anton-v26-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('assets/fonts/anton-v26-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('assets/fonts/anton-v26-latin_latin-ext-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
   url('assets/fonts/anton-v26-latin_latin-ext-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
   url('assets/fonts/anton-v26-latin_latin-ext-regular.svg#Anton') format('svg'); /* Legacy iOS */
}

/**
 * css-variables (:root)
 */


:root {
   /* ============================
     Farben
  ============================ */
   --color-w: rgb(255, 255, 255); /* Standard Weiß / TExt auf dunklem Hintergrung */
   --color-b: #2f2f2f; /* Schwarz / Standard Textfarbe */
   --color-sand: rgb(241, 237, 232); /* Hintergrundfarbe Body & Sidebar  */
   --color-mauve: rgb(237, 218, 214); /* Hintergrundfarbe Navi */
   --color-taupe: rgb(197, 180, 175); /* Hintergrundfarbe Header */
   --color-gris: rgb(221, 223, 235); /* Hintergrundfarbe Mobiles Navi */
   --color-rose-light: rgb(255, 251, 251); /* Hintergrundfarbe Blogartikel */
   --color-neon: rgb(244, 253, 188); /* Highlightfarbe / Hover / Cursor Animation / Unterstreichung bei H2 */

/* ============================
     Typografie
  ============================ */
   --font-base: 'Public Sans';
   --font-heading: 'Instrument Serif';
   --font-accent: 'Anton';
   --font-size-base: 1rem;           /* 16px */
   --font-size-small: 0.8rem;
   --font-size-medium: 1.5rem;
   --font-size-large: 2rem;
   --font-size-xlarge: 2.5rem;
   --line-height-base: 1.6rem;
   --line-height-p: 1.3rem;

/* ============================
     Spacing (4er-Skala)
  ============================ */
   --space-xxs: 0.25rem;   /* 4px */
   --space-xs: 0.5rem;     /* 8px */
   --space-small: 1rem;       /* 16px */
   --space-medium: 2rem;       /* 32px */
   --space-large: 4rem;       /* 64px */
   --space-xlarge: 6rem;       /* 96px */

/* ============================
     Border Radius
  ============================ */
   --radius-soft: 0.25rem;     /* 4px */
   --radius-default: 0.375rem; /* 6px */

/* ============================
     Schatten
  ============================ */
   --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.05);
   --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/**
 * basic elements
 */
html,
body {
   height: 100%;
}

body {
   font-family: var(--font-base);
   margin: 0;
   background-color: var(--color-sand);
}

h1 {
   font-family: var(--font-accent);
   font-size: var(--font-size-xlarge);
   line-height: var(--line-height-base);
   margin: 0 0 1rem 0;
}

h2 {
   font-family: var(--font-heading);
   font-size: var(--font-size-large);
   font-weight: 400;
   line-height: 1.9rem;
   text-decoration: underline;

   text-decoration-color:var(--color-neon);
   text-decoration-thickness: 0.3rem;
}

h3 {
   font-weight: 600;
   line-height: var(--line-height-base);
}

h4,
h5,
h6 {
   font-family: var(--font-base);
   font-weight: 400;
   line-height: var(--line-height-base);
}

p {
   line-height: var(--line-height-p);
}

img {
   display: block; /* Damit kein weisser Streifen unter dem Bild erscheint */
   width: 100%;
   height: auto;
}

/**
 * structure (layout grid)
 */

.wrapper {
   display: grid;
   grid-template-columns: repeat(20, 5%);
   grid-template-rows: auto auto 1fr auto auto;
   min-height: 100vh;
   min-height: 100svh;  /* Auf Mobilgeräten ändern Browser oft die sichtbare Höhe, wenn Adress-/Toolbar ein- oder ausblendet. Dafür gibt’s neue Viewport-Einheiten */

   _outline: 2px solid pink;
}

/**
 * header
 */

.header {
   grid-column-start: 1;
   grid-column-end: 21;
   grid-row-start: 1;
   grid-row-end: 2;
   color: var(--color-b);
   background-color: var(--color-taupe);
}

.header-brand {
   display: flex;
   flex-direction: row;
   padding: 1rem 1rem;
}

.header-brand-logo img {
   width: auto;
   height: 50px;
   margin-right: 2rem;
}

.header-brand-titlebox-title {
   font-family: var(--font-heading);
   font-size: 2rem;
   margin: 0.4rem 0 0.5rem 0;
   text-transform: uppercase;
}

.header-brand-titlebox-title a {
   text-decoration: none;
   color: var(--color-b);
}

.header-brand-titlebox-subtitle {
   font-size: 1rem;
   margin: 0;
}

/**
 * navigation
 */

nav a {
   text-decoration: none; /*Link-Unterstreichung löschen*/
}

.nav-main {
   grid-column-start: 17;
   grid-column-end: 21;
   grid-row-start: 1;
   grid-row-end: 2;
   padding: 1rem;
   color: var(--color-b);
}

#nav-main-desktop {
   display: none;
}

#nav-main-mobile {
   position:absolute; /*orientiert sich am Monitor*/
   top: 0;
   right: 30px;
   height: 80px;
}

#nav-main-mobile-toggle {
   position: relative; /*orientiert sich am Container*/
   z-index: 980; /*damit die drei Striche oben liegen, aber unterhalb der Checkbox*/
   top: 20px; /*damit die drei Striche nicht ganz oben kleben*/
   display: flex;
   align-items: center; /*damit die drei Striche zentriert sind*/
   flex-direction: column; /*damit die drei Striche untereinander sind*/
   user-select: none; /*damit man die Checkbox nicht sieht*/
}

#nav-main-mobile-toggle input {
   position: absolute; /*orientiert sich am Monitor*/
   z-index: 999; /*damit die Checkbox überhalb der drei Striche liegt*/
   width: 40px; /*nicht verändern, damit die checkbox funktioniert*/
   height: 32px;/*nicht verändern, damit die checkbox funktioniert*/
   cursor:pointer;/*damit die Checkbox klickbar ist*/
   opacity: 0; /*damit die Checkbox ausgeblendet wird*/
}

#nav-main-mobile-toggle span {
   z-index: 990;
   width: 29px; /*Breite des Burgersymbols*/
   height: 2px; /*Höhe des Burgersymbols*/
   margin-bottom: 5px; /*Abstand der Span-Elemente*/

/* Beginn der Animation des Hamburger Menüs --------- */
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
   background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
   opacity 0.55s ease;
   transform-origin: 5px 0;/* ------------------------------ */
   background-color: var(--color-b); /*Farbe des Burgersymbols*/
}

/* Fortsetzung der Animation des Hamburger Menüs ------*/
#nav-main-mobile-toggle span:first-child {
   transform-origin: 0 0;
}

#nav-main-mobile-toggle span:nth-child(2) {
   transform-origin: 0 100%;
}

#nav-main-mobile-toggle input:checked ~ span {
   transform: rotate(45deg) translate(-2px, -3px);
   opacity: 1;
   background-color: var(--color-b);
}

#nav-main-mobile-toggle input:checked ~ span:nth-last-child(3) {
   transform: rotate(0deg) scale(0.2, 0.2);
   opacity: 0;
}

#nav-main-mobile-toggle input:checked ~ span:nth-last-child(2) {
   transform: rotate(-45deg) translate(0, -1px);
}

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


#nav-main-mobile-menu {
   font-size: 1.4rem;
   line-height: var(--line-height-base);
   position: absolute; /*orientiert sich am Monitor*/
   width: 700px; /*Wert kann noch angepasst werden*/
   height: auto; /*Wert kann noch angepasst werden*/
   margin: -20px -10px 0 -150px; /*Position des aufgeklappten Menüs*/
   padding: 50px 200px;

/* Animation für die Menü-Card -----------*/
   transition: transform 0.6s cubic-bezier(0.77,0.2,0.05,1.0);
   transform: translate(100%, 0);
   transform-origin: 0 0; /* Ende Animation Menü-Card------------------------------- */
   white-space: nowrap; /* Verhindert Zeilenumbruch*/
   text-transform: uppercase;
   background-color: var(--color-gris);
}

#nav-main-mobile-menu a {
   color: var(--color-b);
}

#nav-main-mobile-menu ul {
   line-height: 2rem;
   padding: 0;
   list-style: none;
}

#nav-main-mobile-menu ul .sub-menu li {
   margin: 0 0 0 2rem;
   list-style-type: square;
   color: var(--color-b);
}

#nav-main-mobile-menu ul li ul a {
   font-size: 1.2rem;
   letter-spacing: 0;
   text-transform: none;
}

/* Der Schalter für das Ein- und Ausblenden der Menü-Card */
#nav-main-mobile-toggle input:checked ~ ul {
   transform: none;
}

/**
 * content
 */

.index-main,
.page-main,
.single-main,
.single-portfolio-main,
.page-fullwidth-main,
.page-home-main,
.archive-portfolio-main {
   grid-column-start: 1;
   grid-column-end: 21;
   grid-row-start: 3;
   grid-row-end: 4;
   padding: 4rem;
   color: var(--color-b);
}

.index-main a,
.page-home-main a,
.archive-portfolio-main a {
   text-decoration: none;
   color: var(--color-b);
}

.index-main-container,
.page-home-main-container,
.archive-portfolio-main-container {
   display: flex;
   flex-direction: row;
   gap: 2%;
   flex-wrap: wrap;
}

.index-main-article,
.page-home-main-article {
   position: relative;
   width: 100%;
   margin-bottom: 2rem;
   background-color: var(--color-w);
}

.index-main-article a {
   text-decoration: none;
   color: var(--color-b);
}

.archive-portfolio-main-article {
   position: relative;
   width: 100%;
   margin-bottom: 2rem;
   background-color: var(--color-w);
}

.index-main-article-content,
.page-home-main-article-content {
   line-height: 1.3rem;
   margin: 2.5rem 2.5rem 4rem 2.5rem;
}

.index-main-article-footer,
.page-home-main-article-footer {
   font-size: 0.8rem;
   position: absolute;
   bottom: 0;
   display:flex;
   align-items: centers;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
   padding: 0.8rem;
   background-color: var(--color-mauve);
}

/* Hero Image wird nicht angezeigt in Mobile */
.hero-image-main {
   display:none;
}

/* Icons */
.fa-calendar {
   margin-right: 0.15rem;
}

.fa-user {
   margin-right: 0.15rem;
}

.index-main-subnav {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.index-main-subnav-prev,
.index-main-subnav-next {
   padding: 3rem 0;
}

.index-main-subnav-prev a,
.index-main-subnav-next a {
   text-decoration: none;
   text-transform: uppercase;
   color: var(--color-01);
}

.single-main-article-img {
   padding-bottom: 1.5rem;
}

.single-main-subnav {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.single-main-subnav-prev,
.single-main-subnav-next {
   padding: 3rem 0;
}

.single-main-subnav-prev a,
.single-main-subnav-next a {
   text-decoration: none;
   text-transform: uppercase;
   color: var(--color-01);
}

.archive-portfolio-main-article-content {
   line-height: 1.3rem;
   margin: 2.5rem;
}

.single-portfolio-main-article-title {
   line-height: 2.3rem;
   margin: 0;
}

.single-portfolio-main-topnav {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.single-portfolio-main-topnav-prev,
.single-portfolio-main-topnav-next {
   margin-bottom: 3rem;
}

.single-portfolio-main-topnav-prev a,
.single-portfolio-main-topnav-next a {
   text-decoration: none;
   text-transform: uppercase;
   color: var(--color-01);
}

/**
 * sidebar
 */

.aside {
   grid-column-start: 1;
   grid-column-end: 21;
   grid-row-start: 4;
   grid-row-end: 5;
   padding: 4rem;
   color: var(--color-b);
   background-color: var(--color-sand);
}

/*Kategorienübersicht Seitenleiste*/
.wp-widget-group__inner-blocks a {
   line-height: var(--line-height-base);
   text-decoration: none;
   text-transform: uppercase;
   color: var(--color-b);
}

.wp-widget-group__inner-blocks li {
   margin: 0.8rem;
   padding: 1rem;
   list-style: none; /*Listenpunkte ausblenden*/
   background-color: var(--color-rose-light);
}

.wp-widget-group__inner-blocks ul {
   padding: 0rem;
}

/*Letzte Beiträge Seitenleiste*/
.wp-block-latest-posts ul {
   margin: 0;
}

.wp-block-latest-posts__list li {
   margin: 0 0 1rem 0;
   padding: 1.5rem;
}

.wp-block-latest-posts__featured-image {
   width: 100%;
   margin-bottom: 1.5rem;
}

.wp-block-latest-posts__post-title {
   font-family: var(--font-heading);
   font-size: var(--font-size-large);
   font-weight: 400;
   line-height: 1.9rem;
   text-transform: none;
}

.wp-block-latest-posts__read-more a {
   text-transform: uppercase;
}

.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
   margin-top: 0;
   margin-bottom: 0;
}

/**
 * footer
 */



.footer {
   grid-column-start: 1;
   grid-column-end: 21;
   grid-row-start: 5;
   grid-row-end: 6;
   padding: 4rem;
   color: var(--color-b);
   background-color: var(--color-taupe);
}

.footer a {
   color: var(--color-b);
}

.footer-nav ul {
   padding:0;
   list-style: none; /*Listenpunkte ausblenden*/
}

/**
 * templates
 */

/**
 * special content (plugins)
 */


/* ======================================================*/


/**
 * @media tablet
 */

@media screen and (min-width: 769px) {
   .header-brand {
      padding: 1rem 4rem;
   }

   .header-brand-titlebox-title {
      font-size: 2.5rem;
      margin: 0.4rem 0 0.5rem 0;
   }

   .header-brand-titlebox-subtitle {
      font-size: 1rem;
      margin: 0;
   }

   .index-main,
   .page-main,
   .single-main,
   .page-home-main {
      grid-column-start: 1;
      grid-column-end: 15;
      grid-row-start: 3;
      grid-row-end: 4;
   }

   .index-main-article,
   .page-home-main-article,
   .archive-portfolio-main-article {
      width: 48%;
   }

   .aside {
      grid-column-start: 15;
      grid-column-end: 21;
      grid-row-start: 3;
      grid-row-end: 4;
   }

   #single-portfolio-main-article-container-wrapper {
      display: grid;
      grid-template-columns: repeat(20, 5%);
      grid-template-rows: repeat(5, auto);
      margin-bottom: 2rem;
   }

   #single-portfolio-main-article-container-links {
      grid-column-start: 1;
      grid-column-end: 6;
      grid-row-start: 3;
      grid-row-end: 4;
      color: var(--color-b);
      background-color: var(--color-w);
   }

   .single-portfolio-main-article-content {
      padding: 2rem;
   }

   #single-portfolio-main-article-container-rechts {
      grid-column-start: 7;
      grid-column-end: 21;
      grid-row-start: 3;
      grid-row-end: 4;
      color: var(--color-b);
      ;
   }
}

/* ======================================================*/
/**
 * @media desktop
 */

@media screen and (min-width: 1280px) {
   .header {
      grid-column-start: 1;
      grid-column-end: 21;
      grid-row-start: 1;
      grid-row-end: 2;
   }

   .header-brand-titlebox-title {
      font-size: 2.5rem;
      margin: 0.4rem 0 0.5rem 0;
   }

   .header-brand-titlebox-subtitle {
      font-size: 1rem;
      margin: 0;
   }

   .nav-main {
      font-size: 1rem;
      font-size: 0;
      grid-column-start: 1;
      grid-column-end: 21;
      grid-row-start: 2;
      grid-row-end: 3;
      padding: 1rem 4rem 0.8rem 4rem;
      text-align: left;
      background-color: var(--color-mauve);
   }

   #nav-main-mobile {
      display: none;
   }

   #nav-main-desktop {
      display: inline-block;
      white-space: nowrap; /* Verhindert Zeilenumbruch*/
   }

   #nav-main-desktop ul {
      margin: 0;
      padding: 0;
   }

   #nav-main-desktop ul li {
      position: relative;
      float:left;
      list-style: none;
   }

   #nav-main-desktop ul li a {
      font-size: 1rem;
      float: left;
      margin: 0 4px 4px 0;
      padding: 0.8rem;
      text-align: center;
      text-decoration: none;
      letter-spacing: 0.11rem;
      text-transform: uppercase;
      color: var(--color-b);
      background-color: var(--color-mauve);
   }

   #nav-main-desktop ul li a:hover {
      color: var(--color-01);
      background-color: var(--color-neon);
   }

   #nav-main-desktop ul li ul {
      position: absolute;
      z-index:999;
      top: 100%;
      left: 0;
      overflow: hidden;
      max-height: 0;
   }

   #nav-main-desktop ul li ul a {
      background-color: var(--color-rose-light);
   }

   #nav-main-desktop ul li:hover > ul {
      overflow: visible;
      max-height: auto;
   }

   #nav-main-desktop ul li ul li ul {
      top:0;
      left: 100%;
   }

   /*Hero Bild - nur im Desktop*/
   .hero-image-main {
      display:inline-block;
      grid-column-start: 1;
      grid-column-end: 21;
      grid-row-start: 3;
      grid-row-end: 4;
      color: var(--color-b);
   }

   .hero-image img {
      width: 100%;
      height: auto;
   }

   /*Neues Grid, wegen Hero Bild- nur im Desktop*/

   .single-portfolio-main,
   .page-fullwidth-main,
   .archive-portfolio-main {
      grid-column-start: 1;
      grid-column-end: 21;
      grid-row-start: 4;
      grid-row-end: 5;
   }

   .index-main,
   .page-main,
   .single-main,
   .page-home-main {
      grid-column-start: 1;
      grid-column-end: 15;
      grid-row-start: 4;
      grid-row-end: 5;
   }

   .aside {
      grid-column-start: 15;
      grid-column-end: 21;
      grid-row-start: 4;
      grid-row-end: 5;
   }

   /*Kategorienübersicht in der Sidebar*/
   .wp-widget-group__inner-blocks li:hover {
      color: var(--color-01);
      background-color: var(--color-neon); /*Beim Hovern Hintergrundfarbe ändern*/
   }

   .index-main-article,
   .page-home-main-article,
   .archive-portfolio-main-article {
      width: 32%;
   }

   .archive-portfolio-main-article-img,
   .index-main-article-img {
      overflow:hidden; /* Damit die Transformation innerhalb des Rahmens bleibt */
   }

   .archive-portfolio-main-article img:hover,
   .index-main-article img:hover {
      transition: all 0.5s ease;
      transform: scale(110%);/* Bildgröße verändert sich beim drüber Hovern, wenn dort ein Bild ist - geht nur bei Desktop */

      filter: grayscale(1); /* Filter beim drüber Hovern, wenn dort ein Bild ist - geht nur bei Desktop */
   }

   /*Neues Grid, wegen Hero Bild- nur im Desktop*/
   .footer {
      grid-column-start: 1;
      grid-column-end: 21;
      grid-row-start: 5;
      grid-row-end: 6;
   }

   /* Cursor Farbige Animation */
   .cursor-circle {
      position: fixed; /* Positionierung relativ zum Viewport */
      z-index: 9999; /* Stellt sicher, dass der Kreis über anderen Elementen liegt */
      top: 0;
      left: 0;
      width: 10px; /*  Größe des Kreises */
      height: 30px;
      transition: transform 0.2s ease, background-color 0.2s ease;
      transform: scale(1.2);
      animation: pulse 2.5s infinite ease-in-out;
      pointer-events: none; /* Ignoriert Klicks auf den Kreis */
      border-radius: 1%; /* Macht das Element kreisförmig */
      background-color: var(--color-neon); /* Farbe des Kreises */
   }

   @keyframes pulse {
      0%,
      100% {
         transform: scale(1);
         opacity: 0.6;
      }

      50% {
         transform: scale(1.2);
         opacity: 1;
      }
   }

   /* Cursor Klick-Animation */
   .cursor-click {
      animation: clickPulse 0.4s ease forwards;
   }

   @keyframes clickPulse {
      0% {
         transform: scale(1.9);
      }

      100% {
         transform: scale(1);
      }
   }
}