@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&family=Tapestry&display=swap');

:root{
  --bg:#0b0e10;
  --bg2:#111518;
  --text:#f4f2ee;
  --muted:#a9abad;
  --accent:#f05a35;
  --line:rgba(255,255,255,.14);
  --max:1280px;
}

*{box-sizing:border-box}

/* Smooth Scrolling & Header Offset für Anker-Links (#aboutme, #kontakt, etc.) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Arial,sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}

.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,32px);background:rgba(7,10,12,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{font-family:'Tapestry',serif;font-style:italic;font-size:29px}
.main-nav{display:flex;align-items:center;gap:42px;font-size:12px;letter-spacing:2px}
.main-nav a{position:relative;padding:30px 0;color:#ddd;transition:.25s}
.main-nav a:hover,.main-nav a.active{color:#fff}
.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:20px;height:2px;background:var(--accent)}
.theme-toggle{border:0;background:none;color:#fff;font-size:27px;cursor:pointer;margin-left:12px}
.nav-toggle{display:none;background:none;border:0;color:white}

/* Hero Section */
.hero{height:100vh;min-height:650px;position:relative;display:grid;place-items:center;background:url('../assets/images/header.jpg') center/cover no-repeat;background-attachment:fixed}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,9,.35),rgba(4,7,9,.05) 45%,rgba(4,7,9,.82))}
.hero-content{position:relative;text-align:center;margin-top:40px}
.hero-logo{font-family:'Tapestry',serif;font-style:italic;font-size:clamp(70px,9vw,150px);line-height:.9;text-shadow:0 5px 25px rgba(0,0,0,.35)}
.hero-subtitle{font-size:clamp(14px,1.5vw,22px);letter-spacing:14px;margin:25px 0 26px}
.hero-divider{display:flex;align-items:center;justify-content:center;gap:22px}
.hero-divider span{width:130px;height:1px;background:#fff;opacity:.75}
.hero-divider b{font-size:20px;font-weight:300}
.scroll-down{position:absolute;bottom:28px;left:50%;font-size:31px;transform:translateX(-50%);animation:float 1.7s infinite}
@keyframes float{50%{transform:translate(-50%,7px)}}

/* Portfolio Section */
.portfolio{max-width:var(--max);margin:auto;padding:85px 30px 100px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.section-title{display:flex;align-items:center;gap:25px;letter-spacing:6px;font-size:14px}
.section-title i{width:47px;height:2px;background:var(--accent)}
.section-head>a{font-size:11px;letter-spacing:2px;color:#bbb}
.section-head>a b{font-size:17px;margin-left:8px;color:#fff}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.category{height:250px;position:relative;background-size:cover;background-position:center;overflow:hidden}
.category-landscape{background-image:url('../assets/images/header.jpg')}
.category-city{background-image:url('../assets/images/header.jpg');background-position:72% center}
.category-detail{background-image:url('../assets/images/header.jpg');background-position:40% center}
.category-animal{background-image:linear-gradient(#17191b,#0b0e10)}
.category-shade{position:absolute;inset:0;background:rgba(0,0,0,.5);transition:.3s}
.category:hover .category-shade{background:rgba(0,0,0,.28)}
.category-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;letter-spacing:4px;font-size:12px}
.category-content strong{font-size:34px;font-weight:300}

/* Intro Section */
.intro{background:var(--bg2);border-top:1px solid var(--line)}
.intro-inner{max-width:800px;margin:auto;padding:110px 30px;text-align:center}
.eyebrow{font-size:11px;letter-spacing:5px;color:var(--accent)}
.intro h1{font-family:'Playfair Display',serif;font-size:clamp(42px,6vw,75px);font-weight:500;line-height:1.05;margin:25px 0}
.intro h1 em{font-weight:500;color:#aaa}
.intro p{max-width:620px;margin:0 auto 35px;color:#aaa;line-height:1.9}
.outline-button{display:inline-block;border:1px solid #777;padding:15px 24px;font-size:11px;letter-spacing:2px;color:var(--text);transition:.25s}
.outline-button:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.outline-button span{margin-left:20px}

/* About Section (mit Parallax Background) */
.about-section {
    position: relative;
    padding: 110px 30px;
    background: url('../assets/images/header.jpg') center/cover no-repeat;
    background-attachment: fixed;
    box-shadow: inset 0 0 0 2000px rgba(11, 14, 16, 0.88);
    border-top: 1px solid var(--line);
}
.about-container {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 52px);
    margin: 15px 0 25px;
}
.about-content h2 em {
    color: var(--muted);
}
.about-content p {
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 20px;
}
.about-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.about-highlights {
    display: flex;
    gap: 40px;
    margin: 35px 0;
}
.highlight-item strong {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 5px;
}
.highlight-item span {
    font-size: 0.95rem;
    color: var(--text);
}

/* Contact Section (mit Parallax Background) */
.contact-section {
    position: relative;
    padding: 110px 30px;
    background: url('../assets/images/header.jpg') center/cover no-repeat;
    background-attachment: fixed;
    box-shadow: inset 0 0 0 2000px rgba(7, 10, 12, 0.92);
    border-top: 1px solid var(--line);
}
.contact-container {
    max-width: var(--max);
    margin: 0 auto;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 40px;
    align-items: start;
}
.contact-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    margin: 0 0 20px;
}
.contact-info h2 em {
    color: var(--muted);
}
.contact-info p {
    color: var(--muted);
    line-height: 1.8;
}
.contact-card {
    background: rgba(17, 21, 24, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 4px;
}
.contact-detail-item {
    margin-bottom: 30px;
}
.contact-detail-item:last-child {
    margin-bottom: 0;
}
.contact-detail-item .label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 8px;
}
.contact-link {
    font-size: 1.1rem;
    color: var(--text);
    transition: color .25s;
}
.contact-link:hover {
    color: var(--accent);
}

/* Footer mit Blur-Effekt */
/* Fixierter Footer mit sichtbarem Blur-Effekt */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    padding: 20px max(5vw, 30px);
    border-top: 1px solid var(--line);
    color: #777;
    font-size: 10px;
    letter-spacing: 2px;
    background: rgba(7, 10, 12, 0.65); /* Etwas transparenter für besseren Effekt */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Wichtig: Platzhalter unten im Body, damit der letzte Inhalt nicht verdeckt wird */
body {
    padding-bottom: 60px;
}

/* Light Mode Anpassungen */
body.light{--bg:#f3f1ed;--bg2:#e8e5df;--text:#151719;--muted:#555;--line:rgba(0,0,0,.12)}
body.light .site-header{background:rgba(243,241,237,.9);color:#111}
body.light .main-nav a,body.light .theme-toggle{color:#222}
body.light .hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05),rgba(0,0,0,.72))}
body.light .about-section { box-shadow: inset 0 0 0 2000px rgba(243, 241, 237, 0.90); }
body.light .contact-section { box-shadow: inset 0 0 0 2000px rgba(232, 229, 223, 0.92); }
body.light .contact-card { background: rgba(255, 255, 255, 0.85); }
body.light .site-footer { background: rgba(243, 241, 237, 0.82); }

/* Touch/Mobile Support: Deaktiviert fixed attachment auf Mobilgeräten, da iOS Safari dies nicht flüssig rendert */
@supports (-webkit-touch-callout: none) {
    .hero,
    .about-section,
    .contact-section {
        background-attachment: scroll;
    }
}

/* Responsive Styles */
@media(max-width:900px){
  .main-nav{gap:20px}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .about-container, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media(max-width:650px){
  html{scroll-padding-top:65px}
  .site-header{height:65px}.nav-toggle{display:flex;flex-direction:column;gap:5px}.nav-toggle span{width:25px;height:1px;background:#fff}
  .main-nav{position:absolute;display:none;top:65px;left:0;right:0;padding:20px 30px 30px;background:#0b0e10;flex-direction:column;align-items:flex-start;gap:0}
  .main-nav.open{display:flex}.main-nav a{padding:14px 0}.main-nav a.active:after{bottom:7px}
  .theme-toggle{position:absolute;right:25px;top:13px}.hero{min-height:570px}.hero-subtitle{letter-spacing:7px}.hero-divider span{width:65px}
  .portfolio{padding:65px 20px}.section-head{align-items:flex-start;gap:20px}.section-title{letter-spacing:3px}.category-grid{grid-template-columns:1fr}.category{height:210px}
  .about-section, .contact-section { padding: 65px 20px; }
  .contact-card { padding: 25px; }
  .site-footer{flex-direction:column;gap:15px}
}