/* Schriften lokal (DSGVO-freundlich, kein Google-CDN) */
@font-face{font-family:"Montserrat";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/montserrat-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/montserrat-latin-700-normal.woff2") format("woff2")}

:root{
  --bg:#f5f5f5;
  --text:#0d0d0d;
  --orange:#f2825f;
  --green:#6dd19a;
  --blue:#a9c1dc;
  --gutter:clamp(16px,4vw,48px);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--blue)}
.brand:hover{color:inherit}

/* Header */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:20px var(--gutter);background:rgba(245,245,245,.92);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:clamp(24px,7vw,120px);text-decoration:none;font-weight:600;letter-spacing:.02em}
/* Logo: Farbwechsel Orange → Grün und leichte Drehung nach rechts beim Hover/Fokus */
.logo{position:relative;display:block;width:46px;height:48px;flex:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 50%}
.logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s ease}
.logo-green{opacity:0}
.brand:hover .logo,.brand:focus-visible .logo{transform:rotate(12deg)}
.brand:hover .logo-green,.brand:focus-visible .logo-green{opacity:1}
.brand:hover .logo-orange,.brand:focus-visible .logo-orange{opacity:0}
.site-header nav{margin-left:auto;display:flex;gap:24px}
.site-header nav a{color:var(--orange);text-decoration:none;font-weight:500}
.site-header nav a:hover{color:var(--blue)}
.header-mail{font-size:.9rem;text-decoration:none}

/* Navigationsleiste (Links, Mail, Menü-Button) erscheint erst, wenn die Startseite verlassen wird */
.site-header nav,.header-mail,.menu-toggle{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.site-header.show-nav nav,.site-header.show-nav .header-mail,.site-header.show-nav .menu-toggle{opacity:1;visibility:visible;pointer-events:auto}

/* Startseite mit großer senkrechter Navigation */
main section.hero{max-width:none;min-height:calc(100svh - 88px);display:flex;align-items:center;padding:0 var(--gutter) clamp(24px,6vh,80px)}
.hero-nav{display:flex;flex-direction:column;gap:clamp(4px,1.5vh,20px);font-size:clamp(3rem,9vw,8.5rem);line-height:1.1;letter-spacing:-.03em}
.hero-nav a{color:var(--orange);font-weight:400;width:max-content}
.hero-nav a:hover{color:var(--blue)}

/* Sections */
/* Alle Abschnitte bündig am linken Rand (gleiche Kante wie das Logo), wie auf der bisherigen Seite */
main section{max-width:none;margin:0;padding:clamp(64px,9vw,128px) var(--gutter)}
h2{font-weight:500;font-size:clamp(2.4rem,5.5vw,4.5rem);letter-spacing:-.03em;line-height:1.05;margin:0}

/* About: Überschrift links, Text eingerückt, rundes Porträt rechts */
.about-body{display:grid;grid-template-columns:minmax(0,1fr) min(26vw,380px);gap:clamp(32px,7vw,120px);align-items:center;margin-top:clamp(40px,9vw,140px)}
.about-text{padding-left:clamp(0px,14vw,200px)}
.about-text p{font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.35;max-width:46ch;margin:0 0 .9em}
.about-img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 22%;border-radius:50%}
.about-img[hidden]{display:none}

/* Carousel */
/* Karussells über die gesamte Bildschirmbreite (Überschrift bleibt im Textraster) */
main section.projects{max-width:none;padding:clamp(48px,7vw,96px) 0;display:flex;flex-direction:column;gap:clamp(40px,6vw,88px)}
.projects h2{margin:0;padding:0 var(--gutter)}
.carousel{width:100%}
.carousel{--accent:var(--orange);--gap:0px;
  /* Folie in voller Höhe sichtbar (Platz für Header und Punkte abziehen); rechts schaut der Anfang der nächsten Folie heraus */
  --slide-w:clamp(60%,calc((100svh - 150px) * 16 / 9),92%);position:relative}
.carousel[data-accent="green"]{--accent:var(--green)}
.carousel[data-accent="blue"]{--accent:var(--blue)}
.slides{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slides figure{flex:0 0 var(--slide-w);margin:0;scroll-snap-align:start}
/* Letzte Folie schließt rechts bündig mit dem Bildschirm ab, links bleibt ein Rest der vorletzten sichtbar */
.slides figure:last-child{scroll-snap-align:end}
.slides img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.carousel button.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:1.3rem;cursor:pointer}
.carousel button.prev{left:12px}
.carousel button.next{right:12px}
.carousel button.nav:disabled{opacity:.35;cursor:default}
.dots{display:flex;gap:10px;justify-content:center;width:max-content;margin:16px auto 0;padding:10px 14px;border-radius:999px;background:var(--accent)}
.dots button{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.dots button[aria-current="true"]{background:#fff}
.carousel:focus-within .dots,.carousel button:focus-visible{outline-offset:2px}
button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Contact: nur die (verschleierte) E-Mail-Adresse */
.contact-mail{display:inline-block;margin-top:clamp(20px,3vw,40px);font-size:clamp(1.15rem,2vw,1.75rem);font-weight:400;letter-spacing:-.01em;color:var(--orange);text-decoration:none;overflow-wrap:anywhere}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:32px var(--gutter);font-size:.85rem;color:#555}
.site-footer a{text-decoration:none}

/* Rechtstexte: gleiche Kante, gleiche Überschriften-Größe wie die Startseite */
.legal{max-width:none;margin:0;padding:clamp(48px,7vw,96px) var(--gutter)}
.legal h1{hyphens:auto;overflow-wrap:break-word;font-weight:500;font-size:clamp(1.9rem,6vw,4.5rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 clamp(32px,5vw,64px)}
.legal h2{font-size:1.2rem;font-weight:600;letter-spacing:0;line-height:1.3;margin:2em 0 .4em}
.legal h2:first-of-type{margin-top:0}
.legal p{overflow-wrap:anywhere;font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.5;max-width:60ch;margin:0 0 1em}
.legal a{color:var(--orange)}
.legal a:hover{color:var(--blue)}
.legal .todo{background:#fff3cd;padding:2px 6px;border-radius:4px}

/* Mobil */
/* Menü-Button (nur mobil sichtbar) */
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.menu-toggle span{position:absolute;left:8px;right:8px;height:2px;border-radius:2px;background:var(--orange);transition:transform .25s ease,top .25s ease}
.menu-toggle span:nth-child(1){top:16px}
.menu-toggle span:nth-child(2){top:26px}
.menu-toggle:hover span{background:var(--blue)}
body.menu-open .menu-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .menu-toggle span:nth-child(2){top:21px;transform:rotate(-45deg)}

@media (max-width:760px){
  .site-header{backdrop-filter:none;background:var(--bg)}
  .menu-toggle{display:block}
  .site-header nav{display:none;position:fixed;inset:88px 0 0 0;z-index:9;margin:0;flex-direction:column;justify-content:center;gap:clamp(8px,3vh,28px);padding:0 var(--gutter) 12vh;background:var(--bg);font-size:3rem}
  .site-header nav a{font-weight:400;letter-spacing:-.03em;line-height:1.15}
  body.menu-open .site-header nav{display:flex}
  body.menu-open{overflow:hidden}
  .header-mail{display:none}
  .brand span{font-size:.95rem}
  .brand{gap:12px}
  .site-header{gap:12px}
  .about-body{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .about-text{padding-left:0}
  .about-img{width:min(72vw,320px);justify-self:center}
  .carousel button.nav{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.logo,.logo img{transition:none}.brand:hover .logo,.brand:focus-visible .logo{transform:none}}