/* Base */
:root {
    --ink: #102b22;
    --ink-soft: #385749;
    --forest: #214737;
    --accent: #5e7a59;
    --accent-light: #bfd1ac;
    --accent-pale: #eef3e9;
    --paper: #fcfdf9;
    --mint: #edf1e9;
    --sky: #dfe9ee;
    --sky-deep: #496975;
    --poster-purple: #38234d;
    --poster-pink: #ef3f9a;
    --poster-pink-light: #ff9dce;
    --poster-pink-pale: #ffe3f2;
    --white: #ffffff;
    --text: #56635a;
    --line: #dce2da;
    --shadow: 0 20px 55px rgba(16, 43, 34, 0.13);
}

* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    overflow-x: hidden;
    color: var(--ink);
    background-color: var(--paper);
    font-family: "Outfit", sans-serif;
}
img { width: 100%; height: auto; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; }
section { scroll-margin-top: 88px; }
h1, h2, h3, p { text-wrap: balance; }
h1, h2, h3 { letter-spacing: -0.065em; }
h1 { font-size: clamp(4rem, 8vw, 8.5rem); font-weight: 700; line-height: 0.87; }
h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); font-weight: 700; line-height: 0.94; }
h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.45; }
p { color: var(--text); font-size: 1.08rem; font-weight: 400; line-height: 1.7; }

/* Header */
.header {
    position: sticky; top: 0; z-index: 100; min-height: 82px; padding: 0 8%;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(16, 43, 34, 0.1);
    background: rgba(252, 253, 249, 0.88); backdrop-filter: blur(16px);
}
.home .header { position: absolute; width: 100%; border-bottom-color: rgba(255, 255, 255, 0.14); background: transparent; backdrop-filter: none; }
.logo { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.04em; }
nav ul { display: flex; gap: 5px; }
nav li { list-style: none; }
nav a {
    display: block; padding: 9px 13px; border-radius: 999px; color: var(--ink-soft);
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
nav a:hover, nav a.active { color: var(--white); background: var(--ink); transform: translateY(-1px); }
.menu-toggle { display: none; }
.home .logo, .home nav a { color: var(--white); }
.home nav a:hover, .home nav a.active { color: var(--ink); background: var(--accent-light); }

/* Hero */
#startseite {
    position: relative; min-height: 730px; height: 100vh; padding: 110px 8% 70px;
    display: flex; align-items: center; isolation: isolate; overflow: hidden; color: var(--white);
    background: url("../assets/img/naturfotografie-rheintal-titelbild.jpg") center / cover;
}
#startseite::before {
    position: absolute; z-index: -1; inset: 0; content: "";
    background: linear-gradient(90deg, rgba(10, 32, 25, 0.94) 0%, rgba(10, 32, 25, 0.74) 46%, rgba(10, 32, 25, 0.12) 82%), linear-gradient(0deg, rgba(10, 32, 25, 0.64), transparent 52%);
}
.hero-text { max-width: 770px; margin-top: 50px; opacity: 0; animation: slide-in 900ms cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-text > p, .eyebrow {
    margin-bottom: 20px; color: var(--accent); font-family: "DM Mono", monospace;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; line-height: 1.4;
}
.hero-text > p { color: var(--white); }
.hero-text > p::before, .eyebrow::before { display: inline-block; width: 24px; height: 1px; margin: 0 8px 3px 0; content: ""; background: currentColor; }
.hero-text h1 { margin-bottom: 28px; }
.hero-text h1 span { color: var(--accent-light); }
.hero-text h3 { max-width: 535px; margin-bottom: 36px; color: rgba(255, 255, 255, 0.88); font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.button {
    display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 999px; color: var(--ink); background: var(--accent-light);
    box-shadow: 0 10px 30px rgba(48, 82, 59, 0.26); font-size: 0.93rem; font-weight: 800;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.button:hover { background: var(--white); box-shadow: 0 14px 38px rgba(48, 82, 59, 0.36); transform: translateY(-3px); }

/* Shared sections */
.section-basic, .galerie, .kreativ { padding: clamp(80px, 10vw, 165px) 8%; }
.section-basic { position: relative; background: var(--white); }
.uebermich-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr); gap: clamp(45px, 10vw, 150px); align-items: center; }
.uebermich-text h2 { max-width: 700px; }
.uebermich-container > div:last-child p { max-width: 560px; font-size: 1.18rem; }

/* Die Textspalte richtet sich optisch an der grossen Überschrift aus, nicht am Überbegriff darüber. */
#leidenschaft .uebermich-container > div:last-child { transform: translateY(18px); }

/* Work overview */
.galerie { background: var(--mint); }
.galerie-titel { margin-bottom: 52px; display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.galerie-titel a { padding-bottom: 6px; border-bottom: 2px solid var(--accent); color: var(--ink); font-size: 0.9rem; font-weight: 800; transition: color 180ms ease, border-color 180ms ease; }
.galerie-titel a:hover { border-color: var(--ink); color: var(--accent); }
.galerie-startseite { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 38px); }
.galerie-link { min-width: 0; }
.galerie-link > img, .web-bild-start, .logo-link-bild { height: min(28vw, 430px); border-radius: 24px; box-shadow: var(--shadow); transition: transform 350ms cubic-bezier(.2, .8, .2, 1), box-shadow 350ms ease; }
.galerie-link > img { object-fit: cover; }
.galerie-link:hover > img, .web-link-start:hover .web-bild-start, .logo-link:hover .logo-link-bild { box-shadow: 0 27px 60px rgba(16, 43, 34, 0.22); transform: translateY(-9px) rotate(-1deg); }
.galerie-link > div:last-child { padding: 20px 4px 0; }
.galerie-link p { margin-bottom: 8px; color: var(--accent); font-family: "DM Mono", monospace; font-size: 0.76rem; font-weight: 500; }
.galerie-link h3 { margin-bottom: 8px; font-size: 1.7rem; font-weight: 700; }
.galerie-link span { color: var(--ink-soft); font-size: 0.86rem; font-weight: 700; }
.kreativ-link > img { object-position: center top; }
.logo-link-bild { position: relative; overflow: hidden; background: #101514; }
.logo-link-bild img { position: absolute; top: -15%; left: 50%; width: 150%; height: auto; max-width: none; transform: translateX(-50%); }
.web-bild-start {
    position: relative; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--white);
    background: linear-gradient(140deg, rgba(10, 32, 25, 0.94), rgba(33, 71, 55, 0.48)), url("../assets/img/naturfotografie-rheintal-titelbild.jpg") center / cover;
}
.web-bild-start p, .web-bild-start h3, .web-bild-start span { position: relative; z-index: 1; }
.web-bild-start p { margin-bottom: 13px; color: var(--accent-light); font-family: "DM Mono", monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; }
.web-bild-start h3 { font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 700; line-height: 0.9; }
.web-bild-start span { width: 78px; height: 8px; margin-top: 20px; border-radius: 999px; background: var(--accent-light); }

/* Portfolio intro and galleries */
.portfolio-kopf { padding-top: clamp(130px, 16vw, 220px); }
.portfolio-kopf h1 { max-width: 1100px; margin-bottom: 32px; }
.portfolio-kopf > p { max-width: 660px; font-size: 1.16rem; }
.galerie-navigation { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 42px; }
.galerie-navigation a, .tags span { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.7); font-size: 0.8rem; font-weight: 700; transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.galerie-navigation a:hover { border-color: var(--accent); color: var(--white); background: var(--accent); }
.galerie-portfolio { scroll-margin-top: 88px; }
.galerie-ueberschrift { margin-bottom: 42px; }
.galerie-ueberschrift span { color: var(--accent); font-family: "DM Mono", monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; }
.galerie-ueberschrift h2, .kreativ-titel h2 { margin-top: 10px; }
.landschaftsfotografie { display: grid; grid-template-columns: 1.35fr 0.65fr; grid-template-rows: 310px 310px; gap: 24px; }
.portfolio-bildlink { position: relative; height: 100%; display: block; overflow: hidden; border-radius: 22px; background: var(--ink); box-shadow: 0 12px 35px rgba(16, 43, 34, 0.1); transition: box-shadow 300ms ease; }
.landschaftsfotografie img, .tierfotografie img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; transition: transform 400ms cubic-bezier(.2, .7, .2, 1); }
.portfolio-bildlink:hover { box-shadow: var(--shadow); }
.portfolio-bildlink:hover img { transform: scale(1.045); }
.portfolio-bildlink:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.landschaftsfotografie .grosses-bild { grid-row: span 2; }
.tier-galerie { background: var(--white); }
.tierfotografie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tierfotografie img { height: min(26vw, 400px); }

/* Separate photo galleries */
.galerie-detail-kopf { padding-top: clamp(125px, 15vw, 210px); }
.galerie-zurueck { display: inline-block; margin-bottom: clamp(55px, 8vw, 100px); padding-bottom: 5px; border-bottom: 1px solid var(--accent); color: var(--ink-soft); font-size: 0.82rem; font-weight: 800; transition: color 180ms ease, border-color 180ms ease; }
.galerie-zurueck:hover { border-color: var(--ink); color: var(--accent); }
.galerie-detail-kopf h1 { max-width: 1180px; margin-bottom: 38px; font-size: clamp(3.8rem, 7.3vw, 7.8rem); }
.galerie-detail-intro { max-width: 1050px; display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.galerie-detail-intro > p { max-width: 650px; font-size: 1.16rem; }
.galerie-detail-intro > span { flex: none; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-family: "DM Mono", monospace; font-size: 0.7rem; letter-spacing: 0.08em; }
.galerie-detail-inhalt { padding: clamp(70px, 9vw, 140px) 8%; background: var(--mint); }
.galerie-detail-grid { display: grid; gap: clamp(14px, 2vw, 26px); }
.galerie-detail-grid-landschaft { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: min(34vw, 500px); }
.galerie-detail-bild { position: relative; min-width: 0; overflow: hidden; border-radius: 24px; color: var(--white); background: var(--ink); box-shadow: 0 15px 38px rgba(16, 43, 34, 0.11); cursor: zoom-in; }
.galerie-detail-bild-breit { grid-column: span 7; }
.galerie-detail-bild-hoch { grid-column: span 5; }
.galerie-detail-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms cubic-bezier(.2, .7, .2, 1); }
.galerie-detail-bild:hover img { transform: scale(1.035); }
.galerie-detail-bild:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.galerie-detail-grid-tier { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min(25vw, 360px); }
.galerie-detail-grid-tier .tier-highlight { grid-column: span 2; grid-row: span 2; }
body.lightbox-open { overflow: hidden; }
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; z-index: 1000; inset: 0; padding: 28px; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 18px; align-items: center; color: var(--white); background: rgba(6, 17, 14, 0.94); backdrop-filter: blur(14px); }
.lightbox figure { min-width: 0; display: grid; justify-items: center; gap: 13px; }
.lightbox figure img { width: auto; max-width: 100%; max-height: 82vh; border-radius: 12px; object-fit: contain; box-shadow: 0 25px 65px rgba(0, 0, 0, 0.36); }
.lightbox figcaption { color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; text-align: center; }
.lightbox button { color: var(--white); background: transparent; font: inherit; cursor: pointer; }
.lightbox-schliessen { position: absolute; top: 18px; right: 22px; z-index: 2; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; font-size: 2rem !important; line-height: 1; transition: color 180ms ease, background-color 180ms ease; }
.lightbox-vollbild { position: absolute; top: 18px; right: 82px; z-index: 2; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; font-size: 1.35rem !important; line-height: 1; transition: color 180ms ease, background-color 180ms ease; }
.lightbox-schliessen:hover, .lightbox-vollbild:hover { color: var(--ink); background: var(--accent-light); }
.lightbox-pfeil { width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; font-size: 1.3rem !important; transition: color 180ms ease, background-color 180ms ease; }
.lightbox-pfeil:hover { color: var(--ink); background: var(--accent-light); }
.lightbox button:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }

/* Creative work: the poster-inspired pink signature section */
.kreativ { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--poster-pink); }
.kreativ::before, .kreativ::after { position: absolute; z-index: -1; border-radius: 50%; content: ""; background: var(--poster-purple); }
.kreativ::before { top: -37vw; right: -17vw; width: min(74vw, 1120px); aspect-ratio: 1; }
.kreativ::after { bottom: -25vw; left: -13vw; width: min(47vw, 700px); aspect-ratio: 1; opacity: 0.42; }
.kreativ-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.62fr); gap: clamp(38px, 7vw, 110px); align-items: center; }
.kreativ-titel { display: block; }
.kreativ-titel span, .kreativ-text .eyebrow { color: var(--poster-pink-pale); }
.kreativ-titel h2, .kreativ-text h3 { color: var(--white); }
.kreativ-text { max-width: 510px; margin-top: clamp(50px, 8vw, 130px); }
.kreativ-text h3 { margin-bottom: 13px; font-size: clamp(1.8rem, 2.5vw, 2.6rem); font-weight: 700; }
.kreativ-text p:not(.eyebrow) { color: rgba(255, 255, 255, 0.88); }
.poster-projekt { position: relative; max-width: 470px; justify-self: end; }
.poster-projekt::after { position: absolute; z-index: -1; top: 22px; left: 22px; width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.72); border-radius: 24px; content: ""; }
.poster-bild { overflow: hidden; border: 7px solid var(--white); border-radius: 20px; box-shadow: 0 26px 55px rgba(31, 13, 37, 0.3); transform: rotate(2.5deg); }
.poster-bild img { aspect-ratio: 0.707; }

/* Logo design */
.logo-design { background: var(--white); }
.logo-design-container { display: grid; grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1fr); gap: clamp(45px, 9vw, 140px); align-items: center; }
.logo-design-bild { position: relative; max-width: 520px; aspect-ratio: 1.55; overflow: hidden; border-radius: 24px; background: #101514; box-shadow: 18px 18px 0 var(--accent-pale), var(--shadow); }
.logo-design-bild img { position: absolute; top: -70%; left: 50%; width: 150%; height: auto; max-width: none; transform: translateX(-50%); }
.logo-design-text { max-width: 590px; }
.logo-design-text h3 { margin-bottom: 16px; color: var(--ink); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 700; line-height: 0.96; }
.logo-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.logo-tags span { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--mint); font-size: 0.8rem; font-weight: 700; }

/* Web design */
.webdesign { color: var(--white); background: var(--ink); }
.webdesign .galerie-ueberschrift h2, .webdesign-text h3 { color: var(--white); }
.webdesign .galerie-ueberschrift span, .webdesign .eyebrow { color: var(--accent-light); }
.webdesign .galerie-ueberschrift { margin-bottom: clamp(48px, 6vw, 82px); }
.webdesign .galerie-ueberschrift h2 { max-width: 610px; font-size: clamp(3.2rem, 4.4vw, 5.4rem); }
.webdesign-inhalt { min-width: 0; }
.webdesign-text > p:not(.eyebrow) { margin-bottom: 28px; color: rgba(255, 255, 255, 0.7); }
.webdesign-text h3 { margin-bottom: 16px; font-size: 2.2rem; font-weight: 700; }
.webdesign-container { display: grid; grid-template-columns: minmax(320px, 0.82fr) minmax(520px, 1.18fr); gap: clamp(55px, 7vw, 115px); align-items: center; }
.web-vorschau { min-width: 0; display: block; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 22px; background: var(--white); box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35); transition: transform 250ms ease; }
.web-vorschau:hover { transform: translateY(-7px) rotate(1deg); }
.web-leiste { padding: 13px 16px; display: flex; gap: 7px; background: var(--accent-pale); }
.web-leiste span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.web-einbettung { width: 100%; height: clamp(360px, 34vw, 540px); display: block; border: 0; background: var(--paper); }

/* About and footer */
.dunkel { color: var(--white); background: var(--forest); }
.dunkel .eyebrow { color: var(--accent-light); }
.dunkel h2 { color: var(--white); }
.dunkel p { color: rgba(255, 255, 255, 0.8); }
.uebermich-img img { height: min(40vw, 570px); border: 7px solid rgba(255, 255, 255, 0.95); border-radius: 24px; box-shadow: 18px 18px 0 var(--accent); object-fit: cover; }
.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.tags span { border-color: rgba(255, 255, 255, 0.35); color: var(--white); background: rgba(255, 255, 255, 0.1); }
#footer { padding: 36px 8%; color: rgba(255, 255, 255, 0.68); background: #0a2119; text-align: center; }
#footer p { color: inherit; font-family: "DM Mono", monospace; font-size: 0.72rem; }
#footer a { border-bottom: 1px solid transparent; color: var(--accent-light); transition: border-color 180ms ease, color 180ms ease; }
#footer a:hover, #footer a[aria-current="page"] { border-color: currentColor; color: var(--white); }

/* Kontakt */
.kontakt-kopf { padding-top: clamp(130px, 16vw, 220px); }
.kontakt-kopf h1 { max-width: 1050px; margin-bottom: 32px; }
.kontakt-kopf > p:last-child { max-width: 650px; font-size: 1.16rem; }
.kontakt-bereich { padding: clamp(80px, 10vw, 150px) 8%; background: var(--white); }
.kontakt-layout { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: clamp(50px, 9vw, 140px); align-items: start; }
.kontakt-info { position: sticky; top: 125px; }
.kontakt-info h2 { margin-bottom: 24px; font-size: clamp(2.7rem, 4.5vw, 4.6rem); }
.kontakt-info > p:not(.eyebrow) { max-width: 510px; }
.kontakt-mail { display: inline-block; margin-top: 28px; padding-bottom: 5px; border-bottom: 2px solid var(--accent); color: var(--ink); font-size: clamp(1.05rem, 1.6vw, 1.28rem); font-weight: 700; transition: color 180ms ease, border-color 180ms ease; }
.kontakt-mail:hover { border-color: var(--ink); color: var(--accent); }
.kontakt-mail-ohne-js { margin-top: 14px; font-family: "DM Mono", monospace; font-size: 0.82rem; }
.kontakt-schutz { max-width: 480px; margin-top: 38px; padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; border: 1px solid var(--line); border-radius: 18px; background: var(--accent-pale); }
.kontakt-schutz > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--accent); font-size: 0.78rem; font-weight: 800; }
.kontakt-schutz p { font-size: 0.85rem; line-height: 1.55; }
.kontakt-formular-wrap { padding: clamp(28px, 4vw, 52px); border: 1px solid var(--line); border-radius: 28px; background: var(--mint); box-shadow: var(--shadow); }
.kontakt-formular { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kontakt-honig { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }
.formular-feld { display: grid; gap: 9px; }
.formular-feld-breit { grid-column: span 2; }
.formular-feld label { color: var(--ink); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; }
.formular-feld input, .formular-feld select, .formular-feld textarea { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; outline: none; color: var(--ink); background: var(--white); font: inherit; font-size: 1rem; transition: border-color 180ms ease, box-shadow 180ms ease; }
.formular-feld textarea { min-height: 180px; resize: vertical; }
.formular-feld input:focus, .formular-feld select:focus, .formular-feld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(94, 122, 89, 0.14); }
.formular-feld input::placeholder, .formular-feld textarea::placeholder { color: #8d9991; }
.formular-datenschutz { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; color: var(--text); font-size: 0.84rem; line-height: 1.5; cursor: pointer; }
.formular-datenschutz input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.formular-datenschutz a { border-bottom: 1px solid currentColor; color: var(--ink); font-weight: 700; }
.formular-aktion { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.formular-aktion > span { max-width: 240px; color: var(--text); font-size: 0.77rem; line-height: 1.45; text-align: right; }
.kontakt-submit { border: 0; font: inherit; cursor: pointer; }
.formular-status { display: none; margin-bottom: 24px; padding: 16px 18px; border-radius: 15px; font-size: 0.92rem; line-height: 1.5; }
.formular-status.is-visible { display: block; }
.formular-status.is-error { color: #7b2828; background: #f8dddd; }
.formular-status.is-success { color: var(--ink); background: var(--accent-light); }

/* Instagram */
.instagram-bereich { padding: clamp(80px, 10vw, 155px) 8%; background: var(--sky); }
.instagram-layout { display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr); gap: clamp(48px, 9vw, 140px); align-items: center; }
.instagram-text .eyebrow { color: var(--sky-deep); }
.instagram-text h2 { margin-bottom: 24px; }
.instagram-text > p:not(.eyebrow) { max-width: 520px; }
.instagram-link { margin-top: 32px; padding: 14px 18px; display: inline-flex; align-items: center; gap: 11px; border-radius: 999px; color: var(--white); background: var(--sky-deep); font-size: 0.9rem; font-weight: 800; transition: background-color 180ms ease, transform 180ms ease; }
.instagram-link:hover { background: var(--ink); transform: translateY(-3px); }
.instagram-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.instagram-vorschau { max-width: 820px; padding: 18px; display: block; border: 1px solid rgba(73, 105, 117, 0.16); border-radius: 28px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 24px 55px rgba(49, 79, 91, 0.16); transition: transform 260ms ease, box-shadow 260ms ease; }
.instagram-vorschau:hover { box-shadow: 0 30px 65px rgba(49, 79, 91, 0.24); transform: translateY(-7px) rotate(0.5deg); }
.instagram-profilkopf { padding: 4px 3px 16px; display: flex; align-items: center; gap: 12px; }
.instagram-avatar { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--ink); font-size: 1rem; font-weight: 800; }
.instagram-profilkopf > div { display: grid; gap: 1px; }
.instagram-profilkopf strong { font-size: 0.95rem; }
.instagram-profilkopf div span { color: var(--text); font-size: 0.75rem; }
.instagram-bilder { height: min(36vw, 450px); display: grid; grid-template-columns: 1.2fr 0.8fr; grid-template-rows: repeat(2, 1fr); gap: 8px; overflow: hidden; border-radius: 18px; }
.instagram-bilder img { width: 100%; height: 100%; object-fit: cover; }
.instagram-bilder img:first-child { grid-row: span 2; }
.instagram-hinweis { padding: 15px 4px 2px; display: block; color: var(--ink); font-size: 0.82rem; font-weight: 800; text-align: right; }

/* Imprint */
.impressum-kopf { padding-top: clamp(130px, 16vw, 220px); }
.impressum-kopf h1 { margin-bottom: 30px; }
.impressum-kopf > p:last-child { max-width: 550px; font-size: 1.16rem; }
.impressum-inhalt { padding: clamp(70px, 9vw, 140px) 8%; background: var(--mint); }
.impressum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--line); }
.impressum-abschnitt { min-height: 250px; padding: clamp(28px, 4vw, 55px); background: var(--white); }
.impressum-abschnitt h2 { margin-bottom: 20px; font-size: clamp(1.8rem, 2.8vw, 2.7rem); }
.impressum-abschnitt address { color: var(--ink); font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-style: normal; font-weight: 600; line-height: 1.5; }
.impressum-abschnitt address a { border-bottom: 2px solid var(--accent); transition: color 180ms ease, border-color 180ms ease; }
.impressum-abschnitt address a:hover { border-color: var(--ink); color: var(--accent); }
.impressum-abschnitt-breit { grid-column: span 2; min-height: 0; }

/* Back to top */
.back-to-top {
    position: fixed; right: clamp(18px, 3vw, 38px); bottom: 24px; z-index: 90;
    width: 58px; min-height: 60px; padding: 8px 6px 7px; display: grid; place-items: center;
    border: 1px solid rgba(16, 43, 34, 0.12); border-radius: 19px; color: var(--ink); background: var(--accent-light);
    box-shadow: 0 14px 32px rgba(16, 43, 34, 0.18); cursor: pointer;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) rotate(3deg);
    transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease, background-color 180ms ease;
}
.back-to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.back-to-top span { font-family: "DM Mono", monospace; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.08em; }
.back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) rotate(0); }
.back-to-top:hover { background: var(--white); transform: translateY(-4px); }
.back-to-top:focus-visible, .menu-toggle:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }

/* Motion */
@keyframes slide-in { from { opacity: 0; transform: translateX(-45px); } to { opacity: 1; transform: translateX(0); } }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Tablet */
@media (max-width: 1000px) {
    .uebermich-container, .webdesign-container { grid-template-columns: 1fr; gap: 38px; }
    .webdesign .galerie-ueberschrift h2 { max-width: 780px; }
    .web-einbettung { height: min(62vw, 520px); }
    #leidenschaft .uebermich-container > div:last-child { transform: none; }
    .galerie-startseite { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 26px; }
    .galerie-link > img, .web-bild-start, .logo-link-bild { height: min(54vw, 530px); }
    .landschaftsfotografie { grid-template-columns: 1fr; grid-template-rows: none; }
    .landschaftsfotografie img, .landschaftsfotografie .grosses-bild { height: min(65vw, 520px); }
    .landschaftsfotografie .grosses-bild { grid-row: auto; }
    .tierfotografie { grid-template-columns: repeat(2, 1fr); }
    .tierfotografie img { height: min(46vw, 420px); }
    .kreativ-grid { grid-template-columns: 1fr 0.72fr; gap: 42px; }
    .poster-projekt { max-width: 380px; }
    .logo-design-container { grid-template-columns: minmax(260px, 0.75fr) 1fr; gap: 42px; }
    .logo-design-bild { max-width: 360px; }
    .uebermich-img img { width: min(100%, 580px); height: min(74vw, 520px); }
    .kontakt-layout, .instagram-layout { grid-template-columns: 1fr; gap: 48px; }
    .kontakt-info { position: static; }
    .kontakt-info > p:not(.eyebrow), .instagram-text > p:not(.eyebrow) { max-width: 650px; }
    .instagram-vorschau { max-width: 100%; }
    .galerie-detail-grid-landschaft { grid-auto-rows: min(44vw, 460px); }
    .galerie-detail-grid-tier { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min(45vw, 430px); }
    .galerie-detail-grid-tier .tier-highlight { grid-column: span 2; grid-row: span 1; }
}

/* Mobile */
@media (max-width: 640px) {
    .header { min-height: 68px; padding: 0 5%; }
    .logo { font-size: 0.84rem; }
    body.menu-open { overflow: hidden; }
    .menu-toggle {
        position: relative; z-index: 2; width: 44px; height: 44px; padding: 0; display: grid; align-content: center; justify-items: center; gap: 4px;
        border: 1px solid rgba(16, 43, 34, 0.15); border-radius: 15px; color: var(--ink); background: var(--paper); cursor: pointer;
        transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
    }
    .menu-toggle span { width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: transform 220ms ease, opacity 160ms ease; }
    .home .menu-toggle { border-color: rgba(255, 255, 255, 0.45); color: var(--white); background: rgba(10, 32, 25, 0.13); }
    .header.menu-open .menu-toggle { border-color: transparent; color: var(--white); background: var(--ink); }
    .header.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .header.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
    .header.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .header nav {
        position: absolute; top: calc(100% + 8px); right: 5%; left: 5%; padding: 8px; overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; background: var(--ink);
        box-shadow: 0 22px 46px rgba(10, 32, 25, 0.28); opacity: 0; visibility: hidden; transform: translateY(-12px) scale(0.98);
        transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(.2, .7, .2, 1);
    }
    .header.menu-open nav { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
    .header nav ul { display: grid; gap: 4px; }
    .header nav a, .home .header nav a { padding: 15px 16px; border-radius: 15px; color: rgba(255, 255, 255, 0.82); font-size: 0.75rem; text-align: left; }
    .header nav a:hover, .header nav a.active, .home .header nav a:hover, .home .header nav a.active { color: var(--ink); background: var(--accent-light); transform: none; }
    #startseite { min-height: 650px; height: 100svh; padding: 96px 8% 70px; }
    #startseite::before { background: linear-gradient(90deg, rgba(10, 32, 25, 0.91), rgba(10, 32, 25, 0.42)), linear-gradient(0deg, rgba(10, 32, 25, 0.75), transparent 65%); }
    .hero-text { margin-top: 25px; }
    .hero-text h1 { font-size: clamp(3.8rem, 18vw, 5.8rem); }
    .hero-text h3 { font-size: 1.08rem; }
    .section-basic, .galerie, .kreativ { padding: 88px 8%; }
    .galerie-titel { align-items: flex-start; flex-direction: column; margin-bottom: 38px; }
    .galerie-startseite, .tierfotografie, .kreativ-grid { grid-template-columns: 1fr; }
    .galerie-startseite { gap: 36px; }
    .galerie-link > img, .web-bild-start, .logo-link-bild { height: 82vw; max-height: 440px; }
    .landschaftsfotografie, .tierfotografie { gap: 16px; }
    .landschaftsfotografie img, .landschaftsfotografie .grosses-bild, .tierfotografie img { height: 72vw; max-height: 450px; }
    .kreativ-grid { gap: 42px; }
    .kreativ-text { margin-top: 46px; }
    .poster-projekt { max-width: calc(100% - 20px); margin-right: 20px; justify-self: start; }
    .logo-design-container { grid-template-columns: 1fr; gap: 38px; }
    .logo-design-bild { max-width: min(100% - 16px, 410px); }
    .webdesign .galerie-ueberschrift { margin-bottom: 46px; }
    .webdesign .galerie-ueberschrift h2 { font-size: clamp(3rem, 14vw, 4.6rem); }
    .web-einbettung { height: 265px; }
    .uebermich-img img { height: 115vw; box-shadow: 12px 12px 0 var(--accent); }
    .back-to-top { right: 18px; bottom: 18px; width: 54px; min-height: 56px; border-radius: 17px; }
    .impressum-grid { grid-template-columns: 1fr; border-radius: 20px; }
    .impressum-abschnitt { min-height: 0; padding: 32px 26px; }
    .impressum-abschnitt-breit { grid-column: auto; }
    .kontakt-kopf h1 { font-size: clamp(3.45rem, 17vw, 5rem); }
    .kontakt-bereich, .instagram-bereich { padding: 88px 8%; }
    .kontakt-formular-wrap { padding: 26px 20px; border-radius: 22px; }
    .kontakt-formular { grid-template-columns: 1fr; gap: 20px; }
    .formular-feld-breit { grid-column: auto; }
    .formular-aktion { align-items: stretch; flex-direction: column; }
    .formular-aktion > span { max-width: none; text-align: left; }
    .kontakt-submit { justify-content: center; width: 100%; }
    .instagram-bilder { height: 82vw; max-height: 430px; }
    .instagram-vorschau { padding: 12px; border-radius: 22px; }
    .galerie-detail-kopf h1 { font-size: clamp(3.45rem, 16vw, 5.2rem); }
    .galerie-zurueck { margin-bottom: 58px; }
    .galerie-detail-intro { align-items: flex-start; flex-direction: column; gap: 24px; }
    .galerie-detail-inhalt { padding: 78px 8%; }
    .galerie-detail-grid-landschaft, .galerie-detail-grid-tier { grid-template-columns: 1fr; grid-auto-rows: min(78vw, 450px); }
    .galerie-detail-bild-breit, .galerie-detail-bild-hoch, .galerie-detail-grid-tier .tier-highlight { grid-column: auto; grid-row: auto; }
    .lightbox { padding: 70px 16px 88px; grid-template-columns: 1fr; }
    .lightbox figure img { max-height: 72vh; }
    .lightbox-pfeil { position: absolute; bottom: 20px; }
    .lightbox-zurueck { left: calc(50% - 64px); }
    .lightbox-weiter { right: calc(50% - 64px); }
}

@media (hover: none) {
    .portfolio-bildlink:hover img, .galerie-detail-bild:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}