/* CSS Document */

/* Strukturelemente Beginn */
*{
margin:0;
padding:0;
}

html,body {
line-height:1.8em;
overscroll-behavior:smooth;
scroll-behavior: smooth;
}

html{
overflow-x:hidden;
}

img{
width:100%;
height:100%;
}
	

ul{
list-style-type: none;
}


footer{
width:100%;
padding-top:5%;
padding-bottom:64px;
text-align: center;
margin-top:10%;
}


.header{
width: 100%;
position:relative;
top: 0;
z-index: 1000;
background: #fff; 
height:160px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Strukturelemente Ende */

/* div-box id logo */
.logo{
position:absolute;
top:4%;
left:85%;
width:auto;
height:auto;
}


/* Class für den Struktur-Container auf AGB, Kontakt, About, Services */
.content-section {
  display: flex;
  justify-content: center;    /* Zentriert horizontal */
  align-items: center;        /* Zentriert vertikal (optional) */
  padding: 60px 20px;
  background-color: #fff;     /* oder eine andere Farbe */
}

/* Class für den inhaltlicher Container auf AGB, Kontakt, Services */
.content-container {
  max-width: 700px;           /* begrenzt die Breite auf großen Bildschirmen */
  width: 100%;
  text-align:left;         /* zentriert Text */
  line-height: 1.6;
}

/* Überschrift */
.content-container h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

/* Liste */
.content-container ol {
  list-style-position: inside; /* sorgt dafür, dass Zahlen bündig sind */
  padding: 0;
}

.content-container li {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  list-style: none;
  font-family:'Signika', Verdana, sans-serif;
}

.content-container p{
  font-size: 1.1rem;
  font-family:'Signika', Verdana, sans-serif;
  line-height:140%;
}


/* Responsive Anpassung */
@media (max-width: 768px) {
  .content-container h1 {
    font-size: 1.6rem;
  }
  .content-container li {
    font-size: 1rem;
  }
}

/*--Ende--*/

/* Fonts allgemein Start */
@font-face {
  font-family: 'Signika';
  src: url('/fonts/Signika-Regular.ttf') format('truetype'),
       url('/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype'); /* oder .otf */
  font-weight: normal; /* Oder fett, kursiv etc. */
  font-style: normal; /* Oder italic */
}

html,body{
font-family:'Roboto Mono', Verdana, sans-serif;
font-size:15px;
line-height:1.5;
}

h1,h2,h3,h4,h5,h6{
font-family:'Roboto Mono', Verdana, sans-serif;
}

h1{ /* Styling für die h1 auf den Seiten About, AGB, Kontakt */
font-family:'Roboto Mono', Verdana, sans-serif;
font-weight: 500;
font-style: normal;
font-size:20px;
color:blueviolet;
margin:0 0 40px 0;
}

h1.projekt { /* Styling für die h1 auf den Seiten der einzelnen Arbeiten im Portfolio*/
font-family:'Roboto Mono', Verdana, sans-serif;
font-style: normal;
font-size:15px;
font-weight:500;
color:blueviolet;
margin:0 0 20px 0;
}

h2{
margin:50px 0 10px 0;
font-size:17px;
font-weight:400;
color:blueviolet;
}

h2.big{ /* hat die gleichen Eigenschaften wie h1 */
font-family:'Roboto Mono', Verdana, sans-serif;
font-weight: 500;
font-style: normal;
font-size:20px;
color:blueviolet;
margin:0 0 40px 0;  
}

h3{
margin:50px 0 10px 0;
font-size:17px;
font-weight:400;
color:blueviolet;
}

h4{
font-size:20px;
}

h5{
font-size:18px;
}

h6{
font-size:16px;
}

a{
font-family:'Roboto Mono', Verdana, sans-serif;
color:blueviolet;
}

p{
font-family: 'Signika', Verdana, sans-serif;
line-height:120%;
font-size:95%;
color:#000000;
}
/* Ende Fonts allgemein */

/* Style Classes spezial Beginn*/

.inlinelink{  /* Styling für Link im Fließtext auf Kontakt und About */
font-size: 1.1rem;
font-family:'Signika', Verdana, sans-serif;
}

.round{
width: 200px;
height: 200px;
border-radius: 100%;
overflow: hidden;
}

.black,.black:hover{
color:#fff;
background-color:#000;
}

.white,.white:hover{
color:#000;
background-color:#fff;
}
/* Style Classes spezial Ende*/

/* Intro auf Landingspage Styling Classes */

h1.intro{               /* Styling für Text Strahlenkatzen ist ein Designstudio auf Landigpage oben*/
color:#000;
font-size:80%;
font-family:'Roboto Mono', Verdana, sans-serif;
line-height:140%;
}

.introlink{        /* Styling für Link mehr Informationen auf Landingpage oben*/
font-size:70%;
font-family:'Roboto Mono', Verdana, sans-serif;
text-decoration: none;
color:blueviolet;
}


@media (max-width: 768px) {   /* für mobile Ansicht */
h1.intro {
font-size: 1.3rem;    
line-height: 1.6;
}

.introlink{
text-decoration: none;
font-size: 1rem;
color:blueviolet;
}
}

/* Ende Intro auf Landingspage Styling Classes */

.wide{
letter-spacing:4px;
}

/* Ende Fonts Classes */

/* Footer Styling Classes */
.footerlink a{
font-size:80%;
}

.impressum{
margin:10% 0 3% 0;
font-size:120%;
color:#000000;
}

@media (max-width: 768px) {
.impressum{
font-size:1rem;
}

.footerlink a{
font-size:1rem;
line-height:160%;
}
}

/* Ende Footer Styling Classes */


/* Grid für Index-Site Classes */
.grid-container {
margin-top:3%;
background-color:none;
display:grid; 
grid-template-columns:33% 33% 33%;
grid-row-gap:4px; 
grid-column-gap:4px;
}

.grid-item {
background-color:none;
border: 0px solid blue;
font-size: 30px;
text-align: center;
}

.grid-item-1 {
background-color:none;
border: 0px solid blue;
font-size: 2vw;
text-align: left;
padding-left: 2%;
}

@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;  /* eine Spalte auf Mobil */
padding:4%;
grid-row-gap:10px;
}
}
/* Grid für Index-Site Classes Ende */

/* Grid für Portfolio-Unterseiten Start */
.portfolio-grid-container { 
margin-top:5%;
margin-left:20%;
margin-right:20%;
max-width: 50%;
background-color:none;
display:grid; 
grid-template-columns:auto auto auto; 
grid-row-gap:30px; 
grid-column-gap:30px;
}
    
.portfolio-grid-item1 {
background-color:none;
border: 0px solid blue;
font-size: 30px;
text-align: center;
grid-column: span 4;
}

.portfolio-grid-item3 {
background-color:none;
border: 0px solid blue;
font-size:medium;
text-align:left;
grid-column: span 4;
}

.portfolio-grid-item4 {
background-color:none;
border: 0px solid blue;
font-size:medium;
text-align:left;
grid-column: span 2;
}

.portfolio{
margin-top:20px;
margin-bottom:20px;
}

.center{
text-align:center!important;
font-size: 2em;
color:blue;
letter-spacing: 1cap;
}
/* Grid für Portfolio-Unterseiten Ende */

/* Navigation Desktop-Ansicht*/
nav {
background-color:#fff;
color: blueviolet;
padding: 2rem 1rem;
}

nav ul {
display: flex;
list-style: none; /*entfernt Bullets*/
margin: 0;
padding: 0;
gap: 0.8rem;
}

nav a {
color: blueviolet;
text-decoration: none; /*entfernt Unterstreichung von Links*/
padding:8px 18px;
border-radius: 9999px;           /* volle Rundung -> oval */
border: 2px solid currentColor;
}

nav a:hover{
font-family:'Roboto Mono', Verdana, sans-serif;
color:rgb(179, 58, 240);
}

.menu-icon { /* meint das Burger-Icon und ist in der Desktop-Ansicht ausgeblendet */
display: none;
cursor: pointer;
}

/* Sidebar-Styling */
.sidebar {
position: fixed;
top: 0;
left: -500px; /* Start außerhalb des Bildschirms */
width: 10%;
height: 100vh;
padding: 1rem;
display: none;
flex-direction: column;
gap: 1rem;
transition: right 0.3s ease;
z-index: 2000;
}

.sidebar a {
color:#fff;
text-decoration:none;
}

.sidebar.open {
left: 0;
}

  
/* Mobile: Sidebar sichtbar mit slide-in */

@media (max-width: 768px) {
.sidebar {
display: flex;
position: fixed;
top: 0;
left: -500px; /* außerhalb vom Bildschirm */
width: 100%;
height: 100vh;
background-color:blue;
flex-direction: column;
padding: 1rem;
transition: right 0.3s ease;
z-index:3000;
}

.sidebar a{
font-size:2rem;
line-height:3rem;
}

.sidebar.open {
left: 0;
}

.sidebar.open ~ .prev,
.sidebar.open ~ .next {
  pointer-events: none;
  opacity: 0.2; /* optional: leicht ausblenden */
}

.menu-icon {
display: block;
cursor: pointer;
font-size:2rem;
}

.hideOnMobile {
display: none;
}
}

/* Container für die Pfeile */
/* --- Globale Pfeil-Positionierung --- */
.prev, .next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

/* --- Seitenabstände Desktop --- */
.prev {
  left: 2rem; /* Abstand vom linken Rand */
}

.next {
  right: 2rem; /* Abstand vom rechten Rand */
}

/* --- Pfeilgröße und Hover-Effekt --- */
.prev a svg,
.next a svg {
  width: 40px;
  height: 40px;
  fill: blueviolet;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.prev a:hover svg,
.next a:hover svg {
  transform: scale(1.15);
  opacity: 0.9;
}

/* --- Mobile Optimierung --- */
@media (max-width: 768px) {
  .prev, .next {
    top: 50%; /* bleibt mittig */
    transform: translateY(-50%);
  }

  .prev {
    left: max(1rem, env(safe-area-inset-left)); /* Abstand für iPhone-Notch & Ränder */
  }

  .next {
    right: max(1rem, env(safe-area-inset-right)); /* dito für rechte Seite */
  }

  .prev a svg,
  .next a svg {
    width: 30px;
    height: 30px;
  }
}

/*Kontaktformular*/
.kontaktformular {
  max-width: 550px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kontaktformular label {
  font-size: 14px;
  font-weight: 600;
}

.kontaktformular input,
.kontaktformular textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #aaa;
  font-size: 16px;
}

.kontaktformular button {
  background: black;
  color: white;
  padding: 14px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-size: 16px;
}

.kontaktformular button:hover {
  opacity: 0.8;
}

/*Kontaktformular Ende*/