::selection {
  background: #d58b2c;
  color: #fff;
}

/* GRAFISTO – style.css */

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  font-family:"Courier New", Courier, monospace;
  font-weight:300;
  background:#3f372c;
  color:#cfc8bf;
  line-height:1.7;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  max-width:100vw;
  overflow-x:hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Typo */
h1{
  font-family:"Open Sans", Arial, sans-serif;
  font-size:24px;
  font-weight:300;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#d58b2c;
  margin-bottom:0;  /* Kein Abstand, wird durch .intro margin-top gemacht */
}

body.home h1 {
  color:#3f372c;   /* gleiche Farbe wie Hintergrund */
  margin-bottom:28px;  /* Home behält Abstand */
}

h2{
  font-family:"Open Sans", Arial, sans-serif;
  font-size:18px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d58b2c;
  margin-top: 0;  /* Kein Abstand oben */
  margin-bottom:12px;
}

p,
.grid-intro,
.intro,
.grafik-item p{
  line-height:1.5;
}


/* Intro-Text (über gleiche Breite wie Galerie) */
.intro{
  width:100%;
  max-width:100%;
  margin:40px 0 40px;  /* 40px oben für Abstand nach H1, 40px unten */
  color:#a9a196;
}

/* Home-Seite: Intro bleibt ohne top-margin */
body.home .intro {
  margin-top: 0;
}

/* Layout */
main{
  max-width:1200px;
  margin:60px auto 80px;
  padding:0 20px;
  flex:1 0 auto;
  width:100%;
  box-sizing:border-box;
}

/* Sanfter Seiteneinblend – alle Seiten ausser Home (Home hat das Intro) */
body:not(.home) main {
  opacity: 0;
  animation: pageFadeIn 500ms ease 100ms forwards;
}

body:not(.home) header,
body:not(.home) #header-placeholder {
  opacity: 0;
  animation: pageFadeIn 400ms ease forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Buttons (global) */
.btn{
  display:inline-block;
  border:1px solid #d58b2c;
  color:#d58b2c;
  padding:12px 18px;
  font-family:"Open Sans", Arial, sans-serif;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:transparent;
  cursor:pointer;
  transition:background .4s ease, color .4s ease, transform .2s ease, opacity .2s ease;
}
.btn:hover{background:#d58b2c;color:#3f372c;transform:translateY(-1px);}
.btn[disabled]{opacity:.55;cursor:default;transform:none;}

/* Top Hero */
.top-hero{
  position:relative;
  width:100%;
  height:550px;
  overflow:hidden;
  background:#000;
}

.top-hero .hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  animation:heroFade 40s infinite;
}

.top-hero .hero-slide.s1{
  background-image:url("../images/familie/familie6.jpg");
  animation-delay:0s;
}
.top-hero .hero-slide.s2{
  background-image:url("../images/grafisto/grafisto4.jpg");
  animation-delay:10s;
}
.top-hero .hero-slide.s3{
  background-image:url("../images/architektur/architektur14.jpg");
  animation-delay:20s;
}
.top-hero .hero-slide.s4{
  background-image:url("../images/architektur/architektur24.jpg");
  animation-delay:30s;
}

.hero-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

  width:min(92vw, 1200px);
  max-height:40vh;
  height:auto;

  object-fit:contain;
  z-index:5;
  pointer-events:none;
}

.top-hero{
  position:relative;
}

.top-hero .hero-slide{
  z-index:1;
}

@keyframes heroFade{
  0%{opacity:0;}
  8%{opacity:1;}
  80%{opacity:1;}
  100%{opacity:0;}
}

/* Header / Nav */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#f2f2f2;
  border-bottom:1px solid rgba(0,0,0,.1);
  height:var(--barH, 50px);

}

.nav-inner{
  max-width:1200px;
  margin:0 auto;
  height:100%;
  padding:0px 10px;
  display:flex;
  align-items:center;
  justify-content:center;  
  gap:40px;               
}


.brand{
  display:flex;
  align-items:center;
  line-height:0;
}
.brand img{
  height:54px;
  width:auto;
  display:block;
}

nav ul{
  list-style:none;
  display:flex;
  gap:20px;
  align-items:center;
  height:100%;
}

nav ul > li{
  height:100%;
  display:flex;
  align-items:center;
}
nav a{
  font-family:"Open Sans", Arial, sans-serif;
  font-weight:300;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#666;
  padding:0;
  position:relative;
  white-space:nowrap;
  display:flex;
  align-items:center;
  height:100%;
  line-height:1; 
}

nav a:hover{color:#d58b2c;}
nav a.active{color:#d58b2c;}
nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(10px); /* Feinjustage */
  height:1px;
  background:currentColor;
}

/* Header-Placeholder muss die volle Header-Höhe haben */
header #header-placeholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Der geladene Inhalt (nav-inner) ebenfalls auf volle Höhe */
header #header-placeholder .nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}



/* Dropdown */
.has-sub{position:relative;}
.subnav{
  position:absolute;
  top:100%;
  left:0;
  display:none;
  min-width:220px;
  background:#3f372c;
  border:1px solid rgba(0,0,0,.2);
  z-index:1002;
}

.subnav a{
  display:block;
  padding:12px 16px;
  font-family:"Open Sans", Arial, sans-serif;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  transition:background .4s ease, color .4s ease;
}
.subnav a:hover{background:#fff;color:#3f372c;}

.has-sub:hover .subnav{display:block;}
.subnav a.active::after{display:none;}

header nav, header nav *{pointer-events:auto;}
header nav{
  position:relative;
  z-index:1001;
  height:100%;
  display:flex;
  align-items:center;
}
header nav ul{
  height:100%;
  display:flex;
  align-items:center;
}

/* Header: Inhalt IMMER vertikal mittig */
header{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Placeholder + geladener Inhalt sollen die Header-Höhe nutzen */
header #header-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

header #header-placeholder .nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Justified Grid (Architektur / Hochzeiten) */
.justified{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-start;
  margin-top:28px;
}

.justified .jg-item{
  flex:0 0 auto;
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.04);
  text-decoration:none;
  transition:box-shadow .8s ease;
}

.justified .jg-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .8s ease;
}

.justified .jg-item:hover img{transform:scale(1.03);}
.justified .jg-item:hover{box-shadow:0 18px 40px rgba(0,0,0,0.35);}

/* Hover-Animation auf allen anderen Bildern der Seite */

/* Arbeiten-Übersicht: Vorschaubilder */
.grafik-item .g-media {
  overflow: hidden;
}
.grafik-item .g-media > img,
.grafik-item .g-media > a > img {
  transition: transform .8s ease, box-shadow .8s ease;
}
.grafik-item .g-media:hover > img,
.grafik-item .g-media > a:hover > img {
  transform: scale(1.03);
}
.grafik-item .g-media > a:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* Über-mich Bilder */
.ueber-mich-bilder img {
  transition: transform .8s ease;
}
.ueber-mich-bilder img:hover {
  transform: scale(1.02);
}

/* Grafik-Galerie Slider */
.g-gallery-slide img {
  transition: transform .8s ease;
}
.g-gallery-slide:hover img {
  transform: scale(1.03);
}

/* Kontakt-Bild */
.ueber-links img {
  transition: transform .8s ease;
}
.ueber-links img:hover {
  transform: scale(1.02);
}

/* Grafikarbeiten */
.grafik-list{
  margin-top:40px;  /* Gleicher Abstand wie .intro */
}

/* Standalone grafik-item (z.B. Fotokurs ohne .grafik-list) */
.grafik-item.longtext {
  margin-top: 40px;  /* Gleicher Abstand wie .grafik-list */
  padding: 0;  /* Kein padding bei standalone */
}

/* Erstes grafik-item ohne padding-top */
.grafik-item:first-child {
  padding-top: 0;
}

.grafik-item{
  display:flex;
  gap:60px;
  padding:56px 0;
  border-bottom:1px solid #d58b2c;
  align-items:flex-start;  /* Bild und Text beginnen oben auf gleicher Höhe */
}

/* Full-Width Variante: Bild oben, Text unten */
.grafik-item.fullwidth{
  flex-direction:column;
  gap:40px;
  padding:0 0 56px 0;
  border-bottom:none;
}

.grafik-item.fullwidth .g-media{
  flex:none;
  max-width:100%;
  width:100%;
  min-height:400px;
  height:auto;
  aspect-ratio:16 / 9;
  margin:0;
}

.grafik-item.fullwidth .g-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.grafik-item.fullwidth .g-text{
  flex:none;
  width:100%;
  max-width:100%;
}

.grafik-item .g-text{
  flex: 1 1 66.666%;  /* 2/3 Breite */
  min-width: 0;
}

.grafik-item p{color:#a9a196;line-height:1.9;margin-bottom:18px;}

.grafik-item a{
  color:#d58b2c;
  text-decoration:underline;
  text-underline-offset:3px;
}

.grafik-item .g-media{
  flex: 0 0 33.333%;  /* 1/3 Breite - fest */
  min-width: 0;
  position: relative;
  display: block;  /* Kein flex mehr, damit Höhe automatisch ist */
}

/* Links in g-media sollen auch Block sein */
.grafik-item .g-media > a {
  display: block;
  width: 100%;
}

.grafik-item .g-media > img,
.grafik-item .g-media > a > img {
  width: 100%;  /* Volle Spaltenbreite */
  height: auto;  /* Automatische Höhe basierend auf Seitenverhältnis */
  display: block;
  object-fit: contain;  /* Bild nicht zuschneiden, Original-Proportionen behalten */
  max-width: 100%;  /* Sicherstellen dass Bild nicht größer wird */
}

.grafik-item .g-media .g-slideshow{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.grafik-item .g-media .g-slideshow img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
}

.g-slideshow.slides-2 img{
  animation-duration:14s;
  animation-iteration-count:infinite;
  opacity:0;
}
.g-slideshow.slides-2 img:nth-child(1){animation-name:slide2_1;}
@keyframes slide2_1{
  0%{opacity:0;}
  8%{opacity:1;}
  70%{opacity:1;}
  85%{opacity:0;}
  100%{opacity:0;}
}
.g-slideshow.slides-2 img:nth-child(2){animation-name:slide2_2;}
@keyframes slide2_2{
  0%{opacity:0;}
  50%{opacity:0;}
  58%{opacity:1;}
  95%{opacity:1;}
  100%{opacity:0;}
}

.g-slideshow.slides-4 img{
  animation-duration:28s;
  animation-iteration-count:infinite;
  opacity:0;
}
.g-slideshow.slides-4 img:nth-child(1){animation-name:slide4_1;}
@keyframes slide4_1{
  0%{opacity:0;}
  8%{opacity:1;}
  21%{opacity:1;}
  25%{opacity:0;}
  100%{opacity:0;}
}
.g-slideshow.slides-4 img:nth-child(2){animation-name:slide4_2;}
@keyframes slide4_2{
  0%{opacity:0;}
  25%{opacity:0;}
  33%{opacity:1;}
  46%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:0;}
}
.g-slideshow.slides-4 img:nth-child(3){animation-name:slide4_3;}
@keyframes slide4_3{
  0%{opacity:0;}
  50%{opacity:0;}
  58%{opacity:1;}
  71%{opacity:1;}
  75%{opacity:0;}
  100%{opacity:0;}
}
.g-slideshow.slides-4 img:nth-child(4){animation-name:slide4_4;}
@keyframes slide4_4{
  0%{opacity:0;}
  75%{opacity:0;}
  83%{opacity:1;}
  96%{opacity:1;}
  100%{opacity:0;}
}

.grafik-item.longtext .g-media{align-items:flex-start;}
.grafik-item .g-text .orange{color:#d58b2c;}

/* Über mich - Bild linksbündig */
/* KEIN margin-left mehr, damit Bild linksbündig mit Titel ist */

/* Fotokurs - Bild volle Breite (wie Titel) */
.fotokurs-fullwidth {
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin: 0 0 40px 0;
}

.fotokurs-fullwidth img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

/* Fotokurs Text nach Bild */
.fotokurs-text {
  width: 100%;
  max-width: 100%;
}

/* Footer */
.site-footer{
  background:#2f2a24;
  border-top:1px solid rgba(255,255,255,0.12);
  padding:32px 20px;
  font-size:12px;
  color:#9f9a93;
  overflow:visible;
  width:100%;
  box-sizing:border-box;
}

.site-footer a{color:#d58b2c;text-decoration:none;}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px;}

.footer-inner{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-sizing:border-box;
}

.footer-copy{
  font-size:11px;
  color:#7f7a73;
  line-height:1.4;
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:20px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.footer-social{
  display:flex;
  gap:14px;
  flex-shrink:0;
  min-width:100px;
}

.footer-social a{
  display:inline-flex;
  width:24px;
  height:24px;
  opacity:0.65;
  transition:opacity .4s ease, transform .4s ease;
  flex-shrink:0;
}

.footer-social svg{
  width:24px;
  height:24px;
  fill:#d58b2c;
}

.footer-social a:hover{
  opacity:1;
  transform:translateY(-1px);
}

/* Intro Film (Index) */
/* =========================
   INTRO OVERLAY
   ========================= */

#intro-overlay {
  position: fixed;
  inset: 0;
  background: #3f372c;
  z-index: 9999;
  pointer-events: none;
}

/* Obere/untere Hälfte */
#intro-overlay .intro-top,
#intro-overlay .intro-bottom {
  position: absolute;
  left: 0; right: 0;
  background: #3f372c;
}
#intro-overlay .intro-top    { top: 0;    height: 50%; }
#intro-overlay .intro-bottom { bottom: 0; height: 45%; }

/* Navigationsbalken */
#intro-overlay .intro-bar {
  position: fixed;
  left: 0; right: 0;
  top: var(--barTop, 0px);
  height: var(--barH, 50px);
  background: #f2f2f2;
  z-index: 10002;
  display: flex;
  align-items: center;
}
#intro-overlay .intro-bar .intro-nav { opacity: 0; }

#intro-overlay .intro-logo {
  position: absolute;
  left: 50%;
  top: 275px;
  transform: translate(-50%, -50%) scale(1.22);
  width: min(72vw, 950px);
  max-height: 35vh;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  animation: introLogoIn 900ms ease 200ms forwards;
}

/* Text – gleiche Breite/Padding wie main */
#intro-overlay .intro-bottom {
  padding-top: 0;
  box-sizing: border-box;
}
#intro-overlay .intro-type {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-line;
  position: relative;
  top: 160px;
}
#intro-overlay .overlay-title {
  color: #3f372c;
  margin-bottom: 38px;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
}
#intro-overlay .intro-type::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.1em;
  margin-left: 6px;
  background: #a9a196;
  vertical-align: 0px;
  opacity: 0;
}

/* Animationszustände */
body.intro-running { overflow: hidden; }
body.intro-running .top-hero .hero-slide { opacity: 0; }

body.intro-step-bar  #intro-overlay .intro-bar { animation: introBarIn  1200ms ease forwards; }
body.intro-step-bar  #intro-overlay .intro-nav { animation: introNavIn  450ms  ease forwards 900ms; }

body.intro-step-split #intro-overlay .intro-logo {
  transition: transform 800ms ease, opacity 350ms ease;
  transform: translate(-50%, -50%) scale(1.0);
  opacity: 1;
}

body.intro-typing #intro-overlay .intro-type::after {
  opacity: 0.9;
  animation: introCursorBlink 900ms infinite;
}

body.intro-done header,
body.intro-done #header-placeholder,
body.intro-done main {
  opacity: 1;
  transition: opacity 600ms ease;
}
body.intro-done #intro-overlay { animation: introOverlayOut 650ms ease forwards; }

/* Keyframes */
@keyframes introLogoIn {
  from { opacity: 0; visibility: visible; transform: translate(-50%, -50%) scale(1.22); }
  to   { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1.10); }
}
@keyframes introBarIn  { from { width: 0; }                 to { width: 100%; } }
@keyframes introNavIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes introCursorBlink { 0%,45% { opacity: 0; } 55%,100% { opacity: 0.9; } }
@keyframes introOverlayOut  { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* Kontaktseite */
.kontakt-wrap{
  display:flex;
  gap:60px;
  align-items:flex-start;
  border-top:1px solid #d58b2c;
  padding-top:28px;
}

.kontakt-col{flex:1 1 50%;min-width:0;}

.kontakt-box h2{margin-top:22px;}
.kontakt-box h2:first-child{margin-top:0;}

.kontakt-text{color:#a9a196;line-height:1.6;}
.kontakt-text a{
  color:#d58b2c;
  text-decoration:underline;
  text-underline-offset:3px;
}

.field{margin-bottom:16px;}

.field label{
  font-family:"Open Sans", Arial, sans-serif;
  font-size:12px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d58b2c;
  margin:0 0 8px;
  display:block;
}

.field input,
.field textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.08);
  color:#cfc8bf;
  outline:none;
  font-family:"Courier New", Courier, monospace;
  font-size:14px;
  line-height:1.5;
}

.field input:focus,
.field textarea:focus{
  border-color:rgba(213,139,44,0.85);
  box-shadow:0 0 0 2px rgba(213,139,44,0.18);
}

.field textarea{min-height:170px;resize:vertical;}

.kontakt-hinweis{
  margin-top:14px;
  font-size:12px;
  color:#9f9a93;
  line-height:1.5;
  max-width:1200px;
}

.form-msg{
  margin-top:14px;
  padding:14px 14px;
  border:1px solid rgba(213,139,44,0.55);
  background:rgba(0,0,0,0.10);
  color:#a9a196;
  display:none;
}
.form-msg strong{color:#d58b2c;font-weight:300;}
.form-msg.is-show{display:block;}

.hp-field{display:none !important;}

.map-wrap{
  margin-top:34px;
  border-top:1px solid #d58b2c;
  padding-top:24px;
}
.map-frame{
  width:100%;
  height:550px;
  border:0;
  filter:grayscale(20%) contrast(105%);
}

/* Responsive */
@media (max-width:980px){
  .nav-inner{padding:0 14px;}
  nav ul{gap:14px;flex-wrap:wrap;justify-content:center;}

  .grafik-item{flex-direction:column;gap:22px;}

  .grafik-item .g-media{
    flex:0 0 auto;
    width:100%;
    max-width:520px;
    justify-content:flex-start;
    align-items:flex-start;
    position:relative;
    height:auto;
    min-height:0;
  }

  .grafik-item .g-media > img{
    position:static;
    width:100%;
    height:auto;
    max-height:none;
  }

  .grafik-item .g-media .g-slideshow{
    position:relative;
    inset:auto;
    width:100%;
  }

  .grafik-item .g-media .g-slideshow::before{
    content:"";
    display:block;
    padding-top:56%;
  }

  .grafik-item .g-media .g-slideshow img{inset:0;}

  .kontakt-wrap{flex-direction:column;gap:26px;}
  .map-frame{height:320px;}
}

@media (max-width:700px){
  .footer-inner{flex-direction:column;align-items:flex-start;}
  .footer-social{margin-top:8px;}
  .top-hero { height: 280px; }
}


/* Overlay-Intro: gleiche vertikale Position wie main-Inhalt */


/* Über-mich – seitenlokale Proportionen */
.ueber-links{
  flex: 0 0 33.333%;  /* 1/3 Breite */
  max-width: none;  /* Keine Begrenzung */
}

.ueber-rechts{
  flex: 1 1 66.666%;  /* 2/3 Breite */
  max-width: none;  /* Keine Begrenzung */
}

/* Über mich – Bilder behalten Original-Seitenverhältnis */
.ueber-mich-bilder {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ueber-mich-bilder img {
  width: 100%;       /* Volle Spaltenbreite */
  height: auto;      /* Automatische Höhe basierend auf Original-Seitenverhältnis */
  object-fit: contain;  /* Kein Zuschneiden */
  display: block;
}

/* Text etwas ruhiger */
.ueber-rechts p {
  max-width: 680px;
}

.grafik-item.longtext .g-text p {
  margin: 0 0 18px;
}

/* =========================
   RECHTSSEITEN (Impressum, Datenschutz, etc.)
   ========================= */

.longtext-solo {
  max-width: 860px;
  margin: 0 0 80px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* h1 und .longtext-solo: gleiche linke Kante wie restlicher Seiteninhalt */
main:has(.longtext-solo) {
  display: block;
}

/* h1 auf Seiten mit .longtext-solo bündig ausrichten – nur CSS, kein HTML nötig */
main:has(.longtext-solo) > h1 {
  margin-bottom: 32px;
}

.longtext-solo h2 {
  margin: 40px 0 12px;
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d58b2c;
}

.longtext-solo h3 {
  margin: 28px 0 8px;
  font-size: 1em;
  font-weight: 400;
  color: #cfc8bf;
}

.longtext-solo p,
.longtext-solo li {
  line-height: 1.8;
  color: #a89e93;
  margin: 0 0 14px;
}

.longtext-solo a {
  color: #d58b2c;
  text-decoration: none;
}

.longtext-solo a:hover {
  text-decoration: underline;
}

.longtext-solo em {
  color: #6b6353;
  font-style: normal;
}

/* Cookie-Tabelle */
.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 28px;
  font-size: 0.9em;
}

.cookie-table th,
.cookie-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #2e2a25;
  color: #a89e93;
}

.cookie-table th {
  color: #cfc8bf;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.cookie-table tr:last-child td {
  border-bottom: none;
}

/* Sitemap-Liste */
.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.sitemap-list li {
  padding: 6px 0;
  border-bottom: 1px solid #2e2a25;
}

.sitemap-list li:last-child {
  border-bottom: none;
}

.sitemap-list a {
  color: #d58b2c;
  text-decoration: none;
}

.sitemap-list a:hover {
  text-decoration: underline;
}

/* =========================
   COOKIE-BANNER
   ========================= */

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #1a1714;
  border-top: 1px solid #2e2a25;
  padding: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85em;
  color: #a89e93;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

#cookie-banner.visible {
  transform: translateY(0);
}

#cookie-banner p {
  flex: 1 1 300px;
  margin: 0;
  line-height: 1.7;
}

#cookie-banner a {
  color: #d58b2c;
  text-decoration: none;
}

#cookie-banner a:hover {
  text-decoration: underline;
}

.cookie-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.cookie-btn-accept {
  background: #d58b2c;
  color: #fff;
}

.cookie-btn-accept:hover {
  background: #c47a1f;
}

.cookie-btn-decline {
  background: transparent;
  color: #a89e93;
  border: 1px solid #3e3830;
}

.cookie-btn-decline:hover {
  background: #2e2a25;
  color: #cfc8bf;
}

@media (max-width: 700px) {
  #cookie-banner {
    padding: 24px 20px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    border-top: 1px solid #3e3830;
  }

  #cookie-banner p {
    font-size: 0.9em;
    line-height: 1.6;
    flex: none;
  }

  .cookie-banner-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .cookie-btn {
    text-align: center;
    padding: 16px;
    font-size: 1em;
    border-radius: 6px;
  }

  .cookie-btn-accept {
    background: #d58b2c;
    color: #fff;
  }

  .cookie-btn-decline {
    background: transparent;
    color: #a89e93;
    border: 1px solid #3e3830;
  }
}

/* =========================
   RESPONSIVE – ERGÄNZUNGEN
   ========================= */

/* ── Tablet (max 980px) – Ergänzungen zum bestehenden Breakpoint ── */
@media (max-width: 980px) {

  /* Grafik-Galerie-Slider volle Breite */
  .g-gallery {
    max-width: 100%;
  }

  /* Über-mich: Spalten untereinander */
  .grafik-item.longtext {
    flex-direction: column;
  }

  .ueber-links {
    flex: 0 0 auto;
    width: 100%;
    max-width: 520px;
  }

  /* Kontakt-Karte etwas kleiner */
  .kontakt-map {
    height: 280px;
  }
}

/* ── Mobile (max 700px) ── */
@media (max-width: 700px) {

  /* Abstände reduzieren */
  main {
    margin-top: 12px;
    margin-bottom: 60px;
    padding: 0 16px;
  }

  body.home main {
    margin-top: 24px;
  }

  /* Schriftgrösse h1 etwas kleiner */
  h1 {
    font-size: 20px;
    letter-spacing: .18em;
  }

  h2 {
    font-size: 15px;
  }

  /* Intro-Text */
  p, .grafik-item p {
    font-size: 0.95em;
  }

  /* Navigation kompakter */
  nav ul {
    gap: 10px;
  }

  /* Grafik-Galerie-Slider: Pfeile etwas grösser zum Antippen */
  .g-gallery-prev,
  .g-gallery-next {
    width: 42px;
    height: 42px;
    font-size: 1.3em;
  }

  /* Kontakt-Karte kleiner */
  .kontakt-map {
    height: 240px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  /* Formular-Button */
  .kontakt-btn {
    padding: 14px;
  }

  /* Über-mich Bilder */
  .ueber-links {
    max-width: 100%;
  }

  /* Sitemap-Liste etwas mehr Abstand */
  .sitemap-list li {
    padding: 10px 0;
  }

  /* Cookie-Tabelle scrollbar machen */
  .cookie-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Kleine Phones (max 420px) ── */
@media (max-width: 420px) {

  main {
    padding: 0 12px;
    margin-top: 30px;
  }

  h1 {
    font-size: 18px;
    letter-spacing: .12em;
  }

  /* Hero-Logo etwas kleiner */
  .hero-logo {
    max-height: 30vh;
  }

  /* Nav noch kompakter */
  .nav-inner {
    padding: 0 10px;
  }

  nav ul {
    gap: 8px;
    font-size: 0.85em;
  }

  /* Galerie-Zähler kleiner */
  .g-gallery-count {
    font-size: 0.7em;
  }

  /* Footer kompakter */
  .footer-inner {
    padding: 20px 12px;
    gap: 16px;
  }

  /* Longtext besser lesbar */
  .longtext-solo p,
  .longtext-solo li {
    font-size: 0.9em;
    line-height: 1.7;
  }

  /* Intro-Overlay Schrift: gleich gross wie normale Seite (kein Verkleinern) */
}

/* =========================
   HAMBURGER MENÜ (nur Mobile)
   ========================= */

/* Button standardmässig versteckt */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(207, 200, 191, 0.3);
  border-radius: 4px;
  cursor: pointer;
  padding: 8px;
  z-index: 10001;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #cfc8bf;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* nav-overlay nicht mehr verwendet – wird via JS als #mobile-nav-overlay in body eingefügt */

/* Mobile Nav-Liste im Overlay */
@media (max-width: 700px) {

  .nav-toggle {
    display: flex;
  }

  /* Desktop-Nav auf Mobile verstecken */
  #nav-list,
  #nav-list.open {
    display: none !important;
    visibility: hidden !important;
  }

  /* nav-inner auf Mobile: Hamburger rechts */
  .nav-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 16px;
    height: 100%;
  }
}

/* Mobile Overlay – direkt in body, sehr hoher z-index */
#mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #2e2820;
  z-index: 99990;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#mobile-nav-overlay.open {
  display: block;
  opacity: 1;
}

/* Mobile Menu – direkt in body, ÜBER dem Overlay */
#mobile-nav-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99995;
  align-items: center;
  justify-content: center;
}

#mobile-nav-menu.open {
  display: flex;
}

#mobile-nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

#mobile-nav-menu ul li a {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfc8bf !important;
  text-decoration: none !important;
  display: block;
  padding: 4px 0;
  transition: color 0.2s;
}

#mobile-nav-menu ul li a:visited {
  color: #cfc8bf !important;
}

#mobile-nav-menu ul li a:hover,
#mobile-nav-menu ul li a.active {
  color: #d58b2c !important;
}

#mobile-nav-menu ul li a.active:visited {
  color: #d58b2c !important;
}

/* =========================
   TOP-BUTTON
   ========================= */

/* Alter fixed TOP-Button ausgeblendet — ersetzt durch footer-top-btn */
#top-btn {
  display: none !important;
}

.footer-top-btn {
  background: transparent;
  border: 1px solid rgba(207, 200, 191, 0.35);
  border-radius: 4px;
  color: #a89e93;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-top-btn:hover {
  color: #d58b2c;
  border-color: #d58b2c;
}
  background: transparent;
  border: 1px solid rgba(207, 200, 191, 0.35);
  border-radius: 4px;
  color: #a89e93;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  text-transform: uppercase;
}

#top-btn:hover {
  color: #d58b2c;
  border-color: #d58b2c;
}

#top-btn.visible {
  display: block;
}

@media (max-width: 700px) {
  #top-btn {
    bottom: 20px;
    right: 16px;
  }
}

/* Aktiver Nav-Link auf Mobile: nur Orange, kein Unterstrich */
@media (max-width: 700px) {
  #nav-list li a.active::after,
  nav a.active::after {
    display: none !important;
  }

  #nav-list li a.active {
    color: #d58b2c;
    text-decoration: none;
  }
}

/* Logo skaliert kontinuierlich via clamp() – keine Breakpoints nötig */

/* Accessibility: visuell versteckt aber für Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}