/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 29 2026 | 07:51:11 */
/* -------------------------------------------------------
   Root Variables
------------------------------------------------------- */
:root {
  /* Farben */
  --cdn-dark: #1a1a1a;
  --cdn-light: #fafafa;
  --cdn-gradient: linear-gradient(to right, #c6db2c, #0aac97);
  --cdn-acc-1: #c6db2c;
  --cdn-acc-2: #0aac97;

  /* Schriftgrößen (clamp: min, bevorzugt, max) */
  --fs-h1: 3.5rem;
  --fs-h2: 3rem;
  --fs-h3: 2.3rem;
  --fs-h4: 1.9rem;
  --fs-h5: 1.5rem;
  --fs-h6: 1.1rem;

  --fs-body: clamp(14px, 1.2vw, 16px);
  --fs-small: clamp(0.85rem, 1vw, 0.95rem);

  --line-height-base: 1.6;
  --line-height-heading: 1.25;

  --radius-small: 4px;
  --radius-large: 12px;
	
	--h-image-height: clamp(300px, 50svh, 500px);
}
@font-face{
	src: url('http://cdn.impredia.de/wp-content/uploads/2026/02/desirepro.woff');
	font-family: 'desire';
}
@font-face{
	src: url('http://cdn.impredia.de/wp-content/uploads/2026/02/Anybody-VariableFont_wdthwght.ttf');
	font-family: 'anybody';
}

/* -------------------------------------------------------
   Base Reset
------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--cdn-light);
  color: var(--cdn-dark);
  font-family: "anybody", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------
   Typography Basics
------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--cdn-dark);
  margin: 1.2rem 0 0.5rem;
}
h1,h2{
	font-family: "desire", serif;
}
h2 + h3{
	margin-top:0;
}
h2:has( + h3){
	margin-bottom:0;
}
h3{
	font-weight:200;
	
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h5); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  margin-bottom: 1.2rem;
  font-size: var(--fs-body);
  color: var(--cdn-dark);
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* -------------------------------------------------------
   Links
------------------------------------------------------- */
a {
  color: var(--cdn-acc-2);
  text-decoration: none;
  transition: 0.2s ease;
}

a:hover,
a:focus {
  color: var(--cdn-acc-1);
  text-decoration: underline;
}

/* -------------------------------------------------------
   Lists
------------------------------------------------------- */
ul, ol {
  margin: 1rem 0 1.2rem 1.5rem;
}

li {
  margin-bottom: 0.6em;
  line-height: var(--line-height-base);
}

/* -------------------------------------------------------
   Blockquote
------------------------------------------------------- */
blockquote {
  border-left: 4px solid var(--cdn-acc-1);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-small);
  font-style: italic;
  color: var(--cdn-dark);
}

/* -------------------------------------------------------
   Code & Preformatted
------------------------------------------------------- */
code {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 5px;
  border-radius: var(--radius-small);
  font-family: "Courier New", monospace;
}

pre {
  background: rgba(0, 0, 0, 0.08);
  padding: 1rem;
  border-radius: var(--radius-large);
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------------
   Tables
------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--fs-body);
}

th, td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

/* -------------------------------------------------------
   Images
------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-small);
}

/* -------------------------------------------------------
   Forms
------------------------------------------------------- */
input,
textarea,
select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-small);
  font-size: var(--fs-body);
  background: var(--cdn-light);
  color: var(--cdn-dark);
}

button,
input[type="submit"] {
  padding: 0.7rem 1.4rem;
  background: var(--cdn-acc-2);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-small);
  font-size: var(--fs-body);
  transition: 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
  background: var(--cdn-acc-1);
}

/* -------------------------------------------------------
   Horizontal Rule
------------------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.15);
  margin: 2rem 0;
}
/* -----------------------------------
   Layout: Header links, Content rechts
----------------------------------- */

body {
  display: flex;
  min-height: 100vh;
}

/* ----- Sidebar / Header-Bereich ----- */
#header {
  width: 30%;
  max-width: 350px;
  min-width: 250px;
	z-index:99;
  background: var(--cdn-dark);
  color: var(--cdn-light);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Damit er vollflächig links steht */
  height: 100dvh;
  position: fixed;
  top: 0;
  overflow-y: auto;
}

/* Standard-Textfarben im Header invertiert */
#header a {
  color: var(--cdn-light);
}

#header a:hover {
  color: var(--cdn-acc-1);
}

/* ----- Inhaltsbereich rechts ----- */
#container {
  flex: 1;
  background: var(--cdn-light);
  color: var(--cdn-dark);
  padding: 2rem 3rem;
  min-height: 100vh;
  overflow-x: hidden;
}
.entry-title{
	display:none;
}
#container{
	padding:0;
	border-radius:0;
}
#container .entry-content{
	padding:0 2rem 2rem 2rem
}
#container .entry-content .wp-post-image{
	width:calc(100% + 4rem)!important;
	max-width:100svw;
	margin-left:-2rem;
	height:var(--h-image-height);
	object-fit:cover;
	border-radius:0;
	margin-bottom:2rem;
	position:sticky;
	top:0;
}
#container .entry-content > *{
	z-index:1;
	position:relative;
}
#container .entry-content .wp-post-image:has( + .Inhaltsblocker){
	position:fixed;
	top:0;
	left:0;
	width:calc(100% + 4rem)!important;
	object-fit:cover!important;
	margin-left:0!important;
	z-index:0;
	box-shadow:inset 50px 0 0 50px var(--cdn-dark);
}
.wp-post-image + .Inhaltsblocker{
	margin-top:var(--h-image-height)!important;
	color:var(--cdn-light)!important;
	position:relative;
	z-index:1;
	box-shadow:0 100000px 0 100000px var(--cdn-light)!important;
}
.wp-post-image + .Inhaltsblocker .rotating-logo{
	width:100%;
	position:absolute;
	z-index:-1;
	width:calc(var(--h-image-height)*.6*2);
	height:calc(var(--h-image-height)*.6);
	top:calc(var(--h-image-height)*.6*-1);
	overflow:hidden;
}
.wp-post-image + .Inhaltsblocker .rotating-logo:before{
	content:"";
	background-image:url("https://www.casa-natalie.it/wp-content/uploads/2026/05/cropped-LCN_Corporate_FlowerIcon.png");
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	position:relative;
	display:block;
	width:calc(var(--h-image-height)*.6*2);
	height:auto;
	aspect-ratio:1;
	animation:rotation 20s linear infinite forwards;
}
@keyframes rotation{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(359deg);
	}
}
.Inhaltsblocker > * > *{
	color:var(--cdn-light)!important;
}
.Inhaltsblocker{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding-top:1rem;
	padding-bottom:1rem;
	width:calc(100% + 4rem);
	margin-left:-2rem;
	margin-bottom:2rem!important;
	margin-top:2rem;
}
#copyright{
	display:none!important;
}
@keyframes rotate-sun{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
/* Optional: schöner Abstand für große Screens */
@media (min-width: 1100px) {
  #container {
		width:calc(100% - clamp(250px, 30%, 350px));
		margin-left:clamp(250px, 30%, 350px);
  }
	#container .entry-content .wp-post-image:has( + .Inhaltsblocker){
	width:calc(100% - clamp(250px, 30%, 350px))!important;
	left:clamp(250px, 30%, 350px)!important;
}
}

/* Optional: Mobile Verhalten
   -> Header wird oben angezeigt (Stack Layout)
*/
@media (max-width: 600px){
	#container .entry-content .wp-post-image{
		width:600px!important;
		max-width:100dvw!important;
		box-shadow:inset -2px 0px 0 2px var(--cdn-dark), 80px 0 0 120px var(--cdn-dark)!important;
}
}