/* ==========================================================================
   URKU – CLEANED for Ronja Rohrer (Design unverändert)
   - Fokus: Header/Navi, Portfolio-Kacheln & Overlay, DIN-Galerie, Lightbox, Footer
   - Entfernt: alte Demo-"item-X"/"post-X"-Hintergründe, Blog/Comments-Reste, ungenutzte Effekte
   ========================================================================== */

@charset "UTF-8";

/* --------------------------
   Grundsetup + Schrift
--------------------------- */
body { margin: 0; }

@font-face{
  font-family:"Dua Rose";
  src:url("../fonts/duarose/DuaroseSerif.ttf") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
:root{
  --font-deco:"Dua Rose","Raleway",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* Brand-Palette */
  --brand-50:#DEF0F0;
  --brand-200:#C1C8E8;
  --brand-400:#A1DEE0;
  --brand-600:#03ABAF;
  --brand-700:#7882BA;
  --brand-800:#007777;
}
.font-duarose{ font-family:var(--font-deco); }

/* Überschriften/Fließtext/Links */
h1,h2,h3,h4,h5,h6{ font-family:var(--font-deco); color:var(--brand-700); text-transform:uppercase; }
p{ color:var(--brand-800); }
p{
  column-count: 1;
  
}

.cc{
  column-count: 2;
  text-align:left;
}
@media (max-width:1024px){
  h1,h2,h3,h4,h5,h6{ 
    padding-left: 1rem;
  padding-right: 1rem;
  hyphens: auto;
  }
  div div p{
  column-count: 1;
  padding-left: 1rem;
  padding-right: 1rem;
}
}
a{ color:var(--brand-600); text-decoration:none; }
a:hover,a:focus{ color:var(--brand-700); }

a.linki{ font-weight:600; }
a.linki:hover{ color:var(--brand-700); }

.u-mb-3 {
  column-count: 1;
}

/* --------------------------
   Layoutcontainer & Main
--------------------------- */
.rk-container{ margin:0 auto; padding:0 .25rem; }
@media (min-width:40em){
  .rk-container{ max-width:88.88889em; width:95vw; }
  .rk-container--inner{ max-width:68.88889em; width:82vw; }
}
.rk-container--full{ max-width:100%; padding:0; width:100%; }

.rk-main{ position:static; z-index:1; }
.top-fixed .rk-main{ padding-top:0rem; } /* kompensiert fixed Header */

/* --------------------------
   Header / Logo / Navigation
--------------------------- */
.rk-header{ background:#fff; position:relative; z-index:5; padding-bottom: 0rem; }
.top-fixed .rk-header{ position:fixed; width:100%; left:0; top:0; }

.rk-topbar{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  padding-top:2.8rem; padding-bottom:3.3rem;
}
@media (min-width:64em){ .rk-topbar{ padding-bottom:0; } }

.rk-logo{ flex:0 0 100%; text-align:center; margin:0; padding:0; }
.rk-logo img.site-logo{ height:48px; width:auto; display:block; }
@media (min-width:64em){
  .rk-logo{ flex:1; text-align:left; }
}

.rk-navigation{
  align-self:baseline;
  display:none; /* wird mobil eingeschaltet, siehe Media Query weiter unten */
}
@media (min-width:64em){
  .rk-navigation{ display:flex; }
}

.rk-menu{
  display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; padding-top:.16rem;
  font-size:.875rem; font-weight:700; letter-spacing:.5px;
}
.rk-menu__item{ color:#202020; padding:0 1.5rem; }
.rk-menu__item:first-child{ padding-left:0; }
.rk-menu__item:last-child{ padding-right:0; }
.rk-menu__item.active{ color:#a0a0a0; }
.rk-menu__link{ padding-bottom:4.2rem; }

/* Farben im Header-Linkzustand nach Marke */
.rk-header .rk-menu__link{ color:var(--brand-700); }
.rk-header .rk-menu__item.active>.rk-menu__link,
.rk-header .rk-menu__link:hover{ color:var(--brand-600); }

/* SVGs Header/Footer an Textfarbe koppeln */
.rk-header svg *, .rk-footer svg *{ fill:currentColor !important; stroke:currentColor !important; }

/* --------------------------
   Portfolio-Kacheln & Overlay
--------------------------- */
.rk-item{ display:block; margin:0 0 .5rem; position:relative; }
.rk-item.ae-masonry__item{ display:inline-block; margin-bottom:0; }
.rk-item img{ display:block; width:100%; }
.rk-item:hover .item-meta{ opacity:1; visibility:visible; }

/* Overlay (Hover) */
.item-meta{
  position:absolute; inset:0; margin:auto; padding:2%;
  display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center;
  background:rgba(255,255,255,.75); color:#202020;
  font-size:.5rem; opacity:0; visibility:hidden; transition:opacity .5s;
}
.item-meta h2{ font-size:1.5em; font-weight:700; }
.item-meta p{ font-size:1em; margin:0; }
@media (min-width:64em){ .item-meta{ font-size:1vw; } }
@media (min-width:94.75em){ .item-meta{ font-size:1rem; } }

/* --------------------------
   Index Cover (Hero am Seitenanfang)
--------------------------- */
.rk-index-cover {
  background-image: url('../img/Header.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover; /* Bild füllt Fläche komplett aus */
  background-attachment: scroll;
  height: 20vh; /* fester Wert statt min-height */
  margin-bottom: 0;
  margin-top: 7rem;
}
@media(max-width:1024px){
  .rk-index-cover{
height: 0;
    
  }
}



/* --------------------------
   Portfolio-Cover (Hero am Seitenanfang)
--------------------------- */
.rk-portfolio-cover{
  background-position:center center; background-size:cover;
  display:flex; justify-content:center; align-items:flex-end;
  height:50vh; padding-bottom:1.5rem; width:100%;
}
@media (min-width:40em){ .rk-portfolio-cover{ padding-bottom:2.5rem; } }

.rk-portfolio-title{ letter-spacing:.0359em; }
.rk-portfolio-category{ letter-spacing:.021em; }
.item-inside__meta{ text-align:center; }

/* --------------------------
   DIN-Galerie (gleich große Hochformat-Karten)
--------------------------- */
.din-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.5rem; margin-top:.5rem; }
.din-card{
  position:relative; display:block;
  background:center/cover no-repeat; border:4px solid #fff; overflow:hidden;
}
.din-card::before{ content:""; display:block; padding-top:141.42%; } /* A-Hochformat */
.din-card .item-meta{ background:rgba(255,255,255,.75); }
.din-card:hover .item-meta{ opacity:1; visibility:visible; }
.din-card .item-meta h2{ font-size:1.5rem; font-weight:700; margin:.1em 0; }
.din-card .item-meta p{ font-size:1rem; margin:0; }
.din-card.js-lightbox{ cursor:zoom-in; }
.top-fixed .din-gallery-wrap{ padding-top:.25rem; }


/* --------------------------
   Quer-Galerie 
--------------------------- */
.quer-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.5rem; margin-top:.5rem; }
.quer-card{
  position:relative; display:block;
  background:center/cover no-repeat; border:4px solid #fff; overflow:hidden;
}
.quer-card::before{ content:""; display:block; padding-top:75%} /* 4 zu 3*/
.quer-card .item-meta{ background:rgba(255,255,255,.75); }
.quer-card:hover .item-meta{ opacity:1; visibility:visible; }
.quer-card .item-meta h2{ font-size:1.5rem; font-weight:700; margin:.1em 0; }
.quer-card .item-meta p{ font-size:1rem; margin:0; }
.quer-card.js-lightbox{ cursor:zoom-in; }
.top-fixed .din-gallery-wrap{ padding-top:.25rem; }


/* --------------------------
   Quadrat-Galerie 
--------------------------- */
.quad-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.5rem; margin-top:.5rem; }
.quad-card{
  position:relative; display:block;
  background:center/cover no-repeat; border:4px solid #fff; overflow:hidden;
}
.quad-card::before{ content:""; display:block; padding-top:100%} /* 4 zu 3*/
.quad-card .item-meta{ background:rgba(255,255,255,.75); }
.quad-card:hover .item-meta{ opacity:1; visibility:visible; }
.quad-card .item-meta h2{ font-size:1.5rem; font-weight:700; margin:.1em 0; }
.quad-card .item-meta p{ font-size:1rem; margin:0; }
.quad-card.js-lightbox{ cursor:zoom-in; }
.top-fixed .din-gallery-wrap{ padding-top:.25rem; }

/* --------------------------
   Lightbox (vanilla)
--------------------------- */
.lb-overlay{
  position:fixed; inset:0; padding:2rem; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.85); z-index:1000; opacity:0; transition:opacity .2s ease;
}
.lb-overlay.show{ opacity:1; }
.lb-overlay img{
  max-width:90vw; max-height:85vh; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.lb-caption{ color:#fff; margin-top:.75rem; text-align:center; font-size:.95rem; opacity:.9; }
.lb-close{
  position:fixed; top:1rem; right:1rem; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px;
}
.lb-close::before{ content:"✕"; font-size:18px; line-height:1; }


/* --------------------------
   Video
--------------------------- */
.rk-video {
  display: flex;
  justify-content: center;   /* horizontal zentrieren */
  align-items: center;       /* vertikal zentrieren (falls Höhe gegeben) */
  width: 100%;               /* volle Breite des Elternelements */
  padding: 1rem 0;           /* nur oben/unten Platz */
}

.rk-video video {
  width: 90vw;               /* 80% der Viewport-Breite */
  max-width: 1200px;         /* optional: maximale Breite */
  height: auto;
  display: block;
  margin: 0 auto;            /* Sicherheitshalber doppelt für Fallback */
  border-radius: 0.5rem;     /* optional, für weiche Kanten */
}

/* --------------------------
   Footer
--------------------------- */
.rk-footer{ margin:5.5rem 0rem 0rem 0rem; padding-left:2rem; padding-right: 2rem; align-items: center;}
.rk-footer__text{ color:#787878; font-size:.75rem; margin-bottom:.875rem; }
.rk-footer__text span{ font-size:.875rem; }
.rk-footer__copy{ letter-spacing:.4px; }
.rk-footer__copy span{ letter-spacing:1.2px; }
.rk-footer__contact{ display:inline-block; letter-spacing:.6px; }
.rk-footer-menu {display: inline-flex;}

@media(max-width:1024px){
  .rk-footer{
    padding:0rem;
  }
}

.rk-social-btn{
  background:none; border:0; display:inline-block; width:20px; height:20px; margin:0 1rem;
}
.rk-social-btn:first-child{ margin-left:0; }
.rk-social-btn:last-child{ margin-right:0; }
.rk-social-btn svg{ width:100%; height:100%; }

.rk-footer,
.rk-footer__text,
.rk-footer__copy,
.rk-footer__by,
.rk-footer__contact,
.rk-social-btn{ color:var(--brand-700); }
.rk-footer a{ color:var(--brand-600); }
.rk-footer a:hover{ color:var(--brand-700); }

/* === Sticky Footer: Seite füllt die Höhe, Footer klebt unten === */
html, body { height: 100%; }

body.top-fixed {
  display: flex;
  min-height: 100vh;   /* volle Höhe */
  flex-direction: column;
}

.rk-main,               /* dein Hauptbereich */
.ae-container-fluid.rk-main {
  flex: 1 0 auto;       /* nimmt den freien Platz ein */
}

.rk-footer {
  margin-top: auto;     /* schiebt den Footer an den unteren Rand */
  padding-top:10rem; 
}



/* --------------------------
   Forms (Kontakt)
--------------------------- */
input::placeholder, textarea::placeholder{ color:var(--brand-200); }

/* --------------------------
   Mobile-Fixes (Menü sichtbar lassen)
--------------------------- */
@media (max-width:1024px){
  /* Navigation mobil/an Tablet sichtbar halten */
  .rk-navigation{ display:flex !important; }

  /* etwas kompakter unter dem Logo */
  .rk-topbar{ padding-bottom:1.2rem; }
  .rk-menu{ gap:1rem; justify-content:flex-end; }
  .rk-menu__link{ padding-bottom:1.2rem; }

  /* Falls im HTML ein Burger-Label existiert, ausblenden */
  .rk-header label[for="mobile-menu"]{ display:none !important; }
}