/* fa-mini.css */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  src: url("../assets/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
       url("../assets/fontawesome/webfonts/fa-solid-900.woff") format("woff");
}

.fa-check:before { content: "\f00c"; }           /* ✔ */
.fa-exclamation-circle:before { content: "\f06a"; } /* ⚠ */

/* style.css */
/*================================== Fonts ==================================*/

@font-face {
  font-display: swap;
  font-family: 'Passion One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/passion-one-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Ruthie';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ruthie-v28-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/abel-v18-latin-regular.woff2') format('woff2');
}

/*================================== General ==================================*/

html { 
  font-size: 16px; 
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 80px;
}

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

:root {
  /* Colors */
  --primary-color: #30343A;
  --secondary-color: #A18C75;
  --text-color: #ffffff;

  /* Font Families */
  --font-family-base: 'Abel', sans-serif;
  --font-family-heading: 'Passion One', sans-serif;
  --font-family-accent: 'Ruthie', cursive;

  /* Font Sizes */
  --font-size-text-mobile: 1.2rem;   
  --font-size-text-tablet: 1.5rem; 
  --font-size-text-desktop: 1.8rem; 

  --font-size-subheading-mobile: 2rem; 
  --font-size-subheading-tablet: 2.5rem; 
  --font-size-subheading-desktop: 3rem; 

  --font-size-heading-mobile: 3rem; 
  --font-size-heading-tablet: 4rem;   
  --font-size-heading-desktop: 5rem;

  --font-size-accent-mobile: 3rem; 
  --font-size-accent-tablet: 4rem; 
  --font-size-accent-desktop: 5rem; 

  --font-size-button-mobile: 1rem; 
  --font-size-button-tablet: 1.8rem; 
  --font-size-button-desktop: 2.2rem; 

  /* Line Height */
  --line-height-mobile: 1.5;
  --line-height-tablet: 1.6;
  --line-height-desktop: 1.7;

  /* Spacing */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 15rem;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Shadow */
  --shadow-sm: 0 5px 5px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.2);
}

/*================================== Base Elements ==================================*/

body {
  background-color: var(--primary-color);
  color: var(--text-color);
  font-family: var(--font-family-base);
  font-size: var(--font-size-text-mobile);
  line-height: var(--line-height-mobile);
}

h1, h2 {
  font-family: var(--font-family-heading);
  text-align: center;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
}

h2 {
  font-size: clamp(3rem, 5vw, 4rem);
}

p {
  text-align: center;
}

/* Buttons */

button {
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-button-mobile);
  color: var(--text-color);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: var(--primary-color);
  border: 1px solid var(--text-color);
}

.btn-secondary {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.header-inner,.hero,.about-me-inner,.projects,.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.hero,.about-me-inner,.projects,.contact {
  padding: var(--spacing-xl) var(--spacing-sm);
}

/* Links as Buttons */

.link-as-btn-primary, .link-as-btn-secondary {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-button-mobile);
  color: var(--text-color);
  background-color: var(--primary-color);
  border: 1px solid var(--text-color);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.link-as-btn-secondary {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.link-as-btn-primary:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-color: var(--secondary-color);
}

.link-as-btn-secondary:hover {
  background-color: var(--primary-color);
  color: var(--text-color);
  border-color: var(--secondary-color);
}

/*================================== Header ==================================*/

#main-header {
  height: 90px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--primary-color);
}

#main-header .header-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-sm);
}

#logo-link {
  height: 50px;
  width: 50px;
}

#logo  {
  height: 100%;
  width: 100%;
}

/* --- Navigation (mobile first) --- */
/*================================== Navigation ==================================*/

/* --- Mobile Off-Canvas Menü --- */

#main-header nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(82vw, 320px);
  height: 100vh;
  background-color: var(--primary-color);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  transition: right 0.4s ease;
  z-index: 999;
  padding-top: 7rem;
}

#main-header nav.active {
  right: 0;
}

#main-header nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}

#main-header nav li {
  width: 100%;
}

#main-header nav a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.3rem 2rem;
  text-decoration: none;
  color: var(--text-color);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  transition: background-color 0.3s ease,
              color 0.3s ease,
              padding-left 0.3s ease;
}

#main-header nav a {
  position: relative;
}

#main-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--secondary-color);
  transition: width 0.3s ease;
}

#main-header nav a:hover,
#main-header nav a.active {
  background: transparent;
  color: var(--secondary-color);
}

#main-header nav a:hover::after,
#main-header nav a.active::after {
  width: 100%;
}

/* ================= Hamburger ================= */



#main-header .menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-color);
  border-radius: 999px;
  transition: transform 0.35s ease,
              opacity 0.25s ease,
              background-color 0.3s ease;
}

/* Hamburger → X */

#main-header .menu-toggle.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

#main-header .menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

#main-header .menu-toggle.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

#main-header .menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 40px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1000;
  position: relative;
}

#main-header .menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-color);
  border-radius: 2px;
  flex-shrink: 0;
}

/*================================== Hero ==================================*/

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--spacing-sm) * 1.6);
}

.hero-image {
  width: 80%;
  max-width: 400px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

h1 {
  font-size: clamp(3.5rem, 5vw, 4rem);
  line-height: 1;
}

.hero h1 span {
  font-family: var(--font-family-accent);
  font-size: clamp(5.5rem, 10vw, 8rem);
  color: var(--secondary-color);
  margin-bottom: var(--spacing-sm);
}

.subheading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-subheading-mobile);
  color: var(--secondary-color);
}

.subheading .accent {
  color: var(--text-color);
}

.button-box {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/*================================== About Me ==================================*/

.about-me {
  background-color: rgba(219, 207, 195, 0.1);
  
}

.about-me-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
}

.about-me-img {
  max-width: 350px;
  max-height: 350px;
}
.about-me-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.about-me-content h2 span {
  color: var(--secondary-color);
}

/*================================== Projects ==================================*/

.projects-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr; /* Mobile: 1 Spalte */
}

.project-card {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}

.projects h2 {
  margin-bottom: var(--spacing-lg);
}

/*================================== Contact ==================================*/

.contact {
  background-color: rgba(219, 207, 195, 0.1);
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.contact h2 {
  color: var(--secondary-color);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.contact-form label,
.contact-form input,
.contact-form textarea {
  display: block;
  text-align: left;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font-size: var(--font-size-text-mobile);
  padding: var(--spacing-xxs);
}

.contact-form button {
  align-self: flex-end;
}

.contact-inner>div p {
  text-align: justify;
}

.contact>p {
    font-family: var(--font-family-accent);
    font-size: clamp(3rem, 5vw, 4rem);
}

.contact>p>span {
    color: var(--secondary-color)
}

.contact-image {
	width: 100%;
}

/*================================== Footer ==================================*/

footer {
  background-color: var(--secondary-color);
  padding: var(--spacing-xl) var(--spacing-sm);
  color: var(--primary-color);
  text-align: center;
}

footer a {
  color: var(--text-color);
  text-decoration: none;
}

/*================================== Responsive Breakpoints ==================================*/

  /*================================== Smartphone ==================================*/

@media (max-width: 600px) {
  #main-header {
    height: 80px;
  }
  #main-header #logo-link  {
    height: 40px;
    width: 40px;
  }  
  .menu-toggle  {
    height: 24px;
    width: 32px;
  }
  #main-header .menu-toggle  {
    height: 24px;
    width: 32px;
  }
  #main-header nav {
    top: 60px;
  }

  .datenschutz h2, .datenschutz p {
    text-align: left;
  }
}
  /*================================== Smartphone ==================================*/

@media (max-width: 600px) {
  #main-header {
    height: 60px;
  }
  #main-header #logo-link  {
    height: 35px;
    width: 35px;
  }  
  .menu-toggle  {
    height: 24px;
    width: 24px;
  }

 .contact-form textarea {
  min-height: 300px;
}

}
/*================================== Tablet ==================================*/

@media (min-width: 600px) {
  header {
    background-color: var(--primary-color);
  }

  .hero-image {
    width: 60%;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  h1 { font-size: var(--font-size-heading-desktop); }
  h2 { font-size: var(--font-size-subheading-desktop); }
}

/*================================== Desktop ==================================*/

@media (min-width: 900px) {

  #main-header nav {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    padding-top: 0;
    right: 0;
    display: flex;
    transition: none;
  }

  #main-header nav ul {
    flex-direction: row;
    gap: 2rem;
    justify-content: flex-end;
  }

  #main-header nav a {
    padding: 0;
    background: transparent;
  }

  #main-header nav a:hover,
  #main-header nav a.active {
    background: transparent;
    color: var(--secondary-color);
    padding-left: 0;
  }

  #main-header .menu-toggle {
    display: none;
  }

  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (min-width: 1200px) {

  /*========== General ==========*/
  .hero,.about-me,.projects,.contact {
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;  
  }
  h1, h2, p, .about-me-inner {
    text-align: left;
  }

  /*========== Hero ==========*/
  .hero h1 {
    line-height: 1.2; /* Platz innerhalb von Hi, ich bin */
  }

  .hero>div {
    flex: 1;
  }

  .hero {
    flex-direction: row-reverse;
    gap: 2rem;
  }
  .button-box {
    justify-content: flex-start;
  }

  /*========== About ==========*/
  .about-me-inner {
    flex-direction: row;
  }
  .about-me-inner div {
    flex: 1;
  }

  /*========== Projects ==========*/
  .projects h2 {
    text-align: center;
  }
  /*========== Contact ==========*/
  .contact-inner {
    display: flex;
    flex-direction: row;
    gap: 6.2rem;
  }
  .contact-inner>div {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1;
  }
  .contact-inner>form {
    flex: 1;
  }

  footer p {
    text-align: center;
  }

}


/* ====================== Feedback-Icon ====================== */
#form-feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#form-feedback.visible {
  opacity: 1;
  transform: translateY(0);
}

#form-feedback::before {
  content: '';
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  font-family: "Font Awesome 6 Free";  /* wichtig für die Icons */
  font-weight: 900;                     /* wichtig für FA Solid Icons */
  color: white;
  margin-right: 0.3rem;
  box-shadow: var(--shadow-lg);
}

/* Erfolg: grüner Kreis mit Häkchen */
#form-feedback.success::before {
  content: "\f00c"; /* fa-check */
  background: var(--success-color, #2ecc71);
}

#form-feedback.error::before {
  content: "\f06a"; /* fa-exclamation-circle */
  background: var(--error-color, #e74c3c);
}

/* kleine Pop-Animation */
#form-feedback.animate::before {
  animation: popIcon 420ms cubic-bezier(.2,.9,.3,1);
}

@keyframes popIcon {
  0% { transform: scale(0.85); opacity: 0.6; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.honeypot label,
.honeypot input {
  position: absolute;
  left: -9999px;
}

/* ====================== Impressum ====================== */
.impressum, .datenschutz {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-sm);
  line-height: var(--line-height-desktop);
}

.impressum strong,.impressum a, .datenschutz strong,.datenschutz a, .datenschutz h3, .datenschutz h4 {
  color: var(--secondary-color);
}

.impressum  header, .datenschutz header {
  margin: var(--spacing-xl) 0;
}

/* ====================== Elemente kommen beim Scrollen rein ====================== */
.fade-in {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

a {
  position: relative;
  overflow: hidden;
}
/* ====================== Premium Button - Glow Effect ====================== */
.link-as-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  transition: left 0.4s ease;
}

.link-as-btn:hover::after {
  left: 100%;
}
/* portfolio-projects.css */
.anchor-alias{position:absolute;transform:translateY(-100px)}.projects{position:relative;height:auto!important;min-height:calc(100vh - 80px);padding-top:5rem!important;padding-bottom:6rem!important}.projects-heading{display:grid;justify-items:center;margin-bottom:3rem;text-align:center}.projects-heading>p{color:var(--secondary-color);font-size:.72rem;letter-spacing:.2em}.projects-heading h2{margin:.15rem 0 .5rem}.projects-heading>span{max-width:620px;color:#c6c8cb;font-size:1rem}.projects-grid{grid-template-columns:1fr;gap:1.5rem}.project-card{display:flex;flex-direction:column;padding:0;overflow:hidden;background:#383c42;border:1px solid rgba(255,255,255,.1);border-radius:2px;text-align:left;box-shadow:0 20px 45px rgba(12,14,16,.24);transition:transform .35s ease,box-shadow .35s ease}.project-card:hover{transform:translateY(-7px);box-shadow:0 28px 55px rgba(12,14,16,.35)}.project-image{position:relative;display:block;height:290px;overflow:hidden}.project-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,27,30,.65),transparent 52%)}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .7s ease}.project-image:hover img{transform:scale(1.045)}.project-image>span{position:absolute;z-index:2;right:1rem;bottom:1rem;padding:.45rem .65rem;background:var(--secondary-color);color:#fff;font-size:.72rem}.project-content{display:flex;flex:1;flex-direction:column;padding:1.5rem}.project-content p{text-align:left}.project-type{margin:0;color:#c8b49d;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}.project-content h3{margin:.35rem 0 .7rem;font-family:var(--font-family-heading);font-size:2rem;font-weight:400}.project-content>p:not(.project-type){color:#d0d2d5;font-size:1rem;line-height:1.55}.project-content ul{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 1.5rem;padding:0;list-style:none}.project-content li{padding:.25rem .5rem;border:1px solid #62676e;border-radius:99px;color:#e3e4e5;font-size:.67rem}.project-link{align-self:flex-start;margin-top:auto;padding-bottom:.2rem;border-bottom:1px solid var(--secondary-color);color:#fff;text-decoration:none}.project-link:hover{color:#d2c0ad}.project-salon .project-image img{filter:saturate(.72)}.project-dental .project-image img{filter:saturate(.68)}@media(min-width:760px){.projects-grid{grid-template-columns:repeat(2,1fr)}.project-dental{grid-column:1/-1;display:grid;grid-template-columns:1.05fr .95fr}.project-dental .project-image{height:100%;min-height:390px}}@media(min-width:1100px){.projects-grid{grid-template-columns:repeat(3,1fr)}.project-dental{grid-column:auto;display:flex}.project-dental .project-image{height:290px;min-height:0}}@media(max-width:600px){.projects{padding-top:4rem!important;padding-bottom:4rem!important}.project-image{height:250px}.projects-heading{justify-items:start;text-align:left}.projects-heading h2,.projects-heading p{text-align:left}}

.project-lunave .project-image img{filter:saturate(.95)}

/* VITALORA portfolio integration */
.project-vitalora .project-image img{object-position:center 42%;filter:saturate(.92)}
@media(min-width:760px) and (max-width:1099px){.project-dental{grid-column:auto;display:flex}.project-dental .project-image{height:290px;min-height:0}}
@media(min-width:1100px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* professional-refresh.css */
:root{--primary-color:#292d32;--secondary-color:#c0a98e;--surface:#32373d;--surface-soft:#373c42;--muted:#c5c8cc;--line:rgba(255,255,255,.12)}
body{font-size:1.08rem;line-height:1.65}p{text-wrap:pretty}h1,h2,h3{letter-spacing:-.025em}h2{font-size:clamp(2.7rem,5vw,4.6rem);line-height:1}.hero,.about-me-inner,.projects,.contact-inner{max-width:1180px}.hero,.about-me-inner,.projects,.contact{padding-left:clamp(1.25rem,4vw,3rem);padding-right:clamp(1.25rem,4vw,3rem)}
#main-header{height:76px;border-bottom:1px solid var(--line);background:rgba(41,45,50,.92);backdrop-filter:blur(14px)}#logo-link{width:44px;height:44px}#main-header nav a{font-size:.76rem;font-weight:600;letter-spacing:.15em}.eyebrow{color:var(--secondary-color);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.hero{min-height:calc(100svh - 76px);display:grid;grid-template-columns:1fr;align-content:center;gap:3rem;text-align:left}.hero-content{align-items:flex-start;gap:1.35rem;order:1}.hero h1{max-width:760px;margin:0;font-size:clamp(3.3rem,8vw,6.7rem);line-height:.92;text-align:left}.hero h1 span{display:block;margin:0;font-family:var(--font-family-heading);font-size:inherit;color:var(--secondary-color)}.hero-intro{max-width:650px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.28rem);text-align:left}.button-box{justify-content:flex-start;flex-wrap:wrap;margin-top:.35rem}.link-as-btn-primary,.link-as-btn-secondary{padding:.75rem 1.25rem;border-radius:0;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:none}
.hero-portrait-wrap{position:relative;justify-self:center;width:min(76vw,400px);padding:1.5rem;background:linear-gradient(145deg,#3a3f45,#24282d);border:1px solid var(--line);box-shadow:0 28px 70px rgba(0,0,0,.28)}.hero-portrait-wrap:before{content:"";position:absolute;inset:11px;border:1px solid rgba(192,169,142,.28);pointer-events:none}.hero-image{display:block;width:100%;max-width:none;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.02)}.portrait-kicker{display:block;margin:-.1rem 0 1rem;color:var(--secondary-color);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}.availability{position:absolute;right:-1rem;bottom:1.25rem;max-width:230px;padding:.7rem .85rem;background:#f3eee8;color:#292d32;font-size:.72rem;line-height:1.35;box-shadow:0 10px 25px rgba(0,0,0,.24)}.availability span,.employment-note>span{display:inline-block;width:.55rem;height:.55rem;margin-right:.45rem;border-radius:50%;background:#6b956f;box-shadow:0 0 0 4px rgba(107,149,111,.13)}
.about-me{background:#f1ede8;color:#292d32}.about-me-inner{min-height:auto;display:grid;grid-template-columns:1fr;gap:3.5rem;padding-top:clamp(5rem,9vw,8rem);padding-bottom:clamp(5rem,9vw,8rem);text-align:left}.about-me-content{align-items:flex-start;gap:1.25rem}.about-me-content h2{max-width:650px;text-align:left}.about-me-content h2 span{color:#8f765e}.about-me-content>p:not(.eyebrow){max-width:690px;color:#575b60;text-align:left}.text-link{margin-top:.6rem;padding-bottom:.2rem;border-bottom:1px solid #8f765e;color:#292d32;font-weight:600;text-decoration:none}.text-link:hover{color:#8f765e}.skills-grid{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(41,45,50,.18)}.skills-grid article{position:relative;padding:1.5rem 0;border-bottom:1px solid rgba(41,45,50,.18)}.skills-grid article>span{color:#8f765e;font-size:.68rem;letter-spacing:.14em}.skills-grid h3{margin:.2rem 0 .4rem;font-family:var(--font-family-heading);font-size:1.65rem;font-weight:400}.skills-grid p{color:#62666b;font-size:.94rem;text-align:left}
.projects{padding-top:clamp(5rem,9vw,8rem)!important;padding-bottom:clamp(5rem,9vw,8rem)!important}.projects-heading>span{color:var(--muted)}.project-card{background:var(--surface);border-color:var(--line)}
.contact{min-height:auto!important;padding-top:clamp(5rem,9vw,8rem);padding-bottom:clamp(5rem,9vw,8rem);background:var(--surface-soft)}.contact>h2{color:#fff}.contact .contact-lead{margin-top:-.75rem;color:var(--secondary-color);font-family:var(--font-family-base);font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.contact-inner{align-items:start}.contact-inner>div p{color:var(--muted);text-align:left}.employment-note{padding:1rem;border-left:2px solid var(--secondary-color);background:rgba(0,0,0,.1);color:#fff!important;font-size:.9rem}.contact-form>div:not(.honeypot){display:grid;gap:.35rem}.contact-form label{color:#e9e9e9;font-size:.78rem;letter-spacing:.06em}.contact-form input,.contact-form textarea{padding:.7rem .8rem;border:1px solid rgba(255,255,255,.18);border-radius:0;outline:none;background:rgba(20,22,25,.22);color:#fff;font-family:inherit}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--secondary-color);box-shadow:0 0 0 3px rgba(192,169,142,.12)}.contact-form textarea{min-height:170px;resize:vertical}.privacy-note{color:#b9bdc1;font-size:.72rem;line-height:1.5;text-align:left}.privacy-note a{color:#e3d4c3}
footer{padding:2rem 1rem;background:#22262a;color:#c3c6c9;font-size:.8rem}footer a{color:#e1d3c3}
@media(min-width:700px){.skills-grid{grid-template-columns:repeat(2,1fr)}.skills-grid article{padding:1.5rem}.skills-grid article:nth-child(odd){padding-left:0;border-right:1px solid rgba(41,45,50,.18)}}
@media(min-width:960px){.hero{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(3rem,7vw,7rem)}.hero-content{order:0}.about-me-inner{grid-template-columns:.9fr 1.1fr;align-items:start;gap:clamp(4rem,8vw,8rem)}.contact-inner{gap:clamp(3rem,7vw,7rem)}}
@media(min-width:1200px){.hero,.about-me,.projects,.contact{height:auto}.hero{min-height:calc(100svh - 76px)}.hero>div,.about-me-inner div{flex:initial}}
@media(max-width:600px){.hero{padding-top:3rem;padding-bottom:4.5rem}.hero-portrait-wrap{width:min(82vw,340px)}.availability{right:-.6rem}.button-box{width:100%}.button-box a{flex:1 1 150px}.contact-form textarea{min-height:180px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.hero-portrait-wrap .hero-image{transform:scaleX(-1)}

/* Hero-Ausgleich: ruhiger, großzügiger und ohne Rahmen um das runde Portrait */
#main-header .header-inner{gap:1.5rem}
#main-header nav ul{gap:clamp(1rem,2.2vw,2rem)}
#main-header nav a{white-space:nowrap}
.hero{gap:clamp(2.5rem,5vw,5rem)}
.hero h1{max-width:670px;font-size:clamp(3rem,5.8vw,5rem);line-height:.98}
.hero-intro{max-width:590px}
.hero-portrait-wrap{width:min(44vw,520px);padding:0;border:0;background:transparent;box-shadow:none}
.hero-portrait-wrap:before{display:none}
.hero-portrait-wrap .hero-image{width:100%;filter:grayscale(1) contrast(1.04);filter:drop-shadow(0 28px 35px rgba(0,0,0,.27)) grayscale(1) contrast(1.04)}
.availability{right:2%;bottom:8%;max-width:245px}

@media(min-width:960px){
  .hero{grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr)}
}
@media(min-width:900px) and (max-width:1050px){
  #main-header nav ul{gap:.85rem}
  #main-header nav a{font-size:.69rem;letter-spacing:.1em}
}
@media(max-width:959px){
  .hero-portrait-wrap{width:min(78vw,450px)}
}
@media(max-width:600px){
  .hero h1{font-size:clamp(2.8rem,13vw,4.1rem)}
  .hero-portrait-wrap{width:min(88vw,410px)}
  .availability{right:0;bottom:5%}
}

/* Bildfreier, typografischer Hero */
.hero{grid-template-columns:1fr;max-width:1180px}
.hero-content{max-width:850px}
.hero h1{max-width:820px;font-size:clamp(3.15rem,6.3vw,5.7rem)}
.hero-intro{max-width:700px}
.hero-aside{align-self:end;width:100%;max-width:460px;padding:1.6rem 0;border-top:1px solid var(--secondary-color);border-bottom:1px solid var(--line)}
.hero-aside>p{margin-bottom:.75rem;color:var(--secondary-color);font-size:.7rem;letter-spacing:.18em;text-align:left;text-transform:uppercase}
.hero-aside ul{margin:0;padding:0;list-style:none}
.hero-aside li{display:grid;grid-template-columns:2.4rem 1fr;padding:.38rem 0;color:#eceeef;font-size:.95rem}
.hero-aside li span{color:#8f949a;font-size:.68rem;letter-spacing:.1em}
.hero-status{margin-top:1.2rem;color:var(--muted);font-size:.78rem}
.hero-status>span{display:inline-block;width:.55rem;height:.55rem;margin-right:.5rem;border-radius:50%;background:#6b956f;box-shadow:0 0 0 4px rgba(107,149,111,.13)}
@media(min-width:960px){.hero{grid-template-columns:minmax(0,1.5fr) minmax(290px,.5fr);align-items:center}.hero-aside{align-self:center}.hero-content{order:0}}
@media(max-width:959px){.hero-aside{justify-self:start}}

/* Dynamische Bühne im Hero */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero:before{content:"";position:absolute;z-index:-3;inset:7% 2% 8% 34%;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.045) calc(25% - 1px),rgba(255,255,255,.045) 25%);transform:skewX(-8deg);pointer-events:none}
.hero:after{content:"";position:absolute;z-index:-2;width:36vw;height:2px;right:-5vw;top:25%;background:linear-gradient(90deg,transparent,var(--secondary-color));transform:rotate(-18deg);transform-origin:right center;opacity:.75}
.hero-content,.hero-aside,.scroll-cue{position:relative;z-index:2}
.hero-motion{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.motion-word{position:absolute;right:-.04em;bottom:-.19em;color:transparent;font-family:var(--font-family-heading);font-size:clamp(14rem,33vw,34rem);line-height:1;-webkit-text-stroke:1px rgba(255,255,255,.055);letter-spacing:-.06em;animation:word-drift 12s ease-in-out infinite alternate}
.motion-ring{position:absolute;border:1px solid rgba(192,169,142,.24);border-radius:50%;animation:ring-float 9s ease-in-out infinite alternate}
.motion-ring:after{content:"";position:absolute;width:.65rem;height:.65rem;top:12%;left:12%;border-radius:50%;background:var(--secondary-color);box-shadow:0 0 22px rgba(192,169,142,.8)}
.motion-ring-one{width:clamp(230px,31vw,500px);height:clamp(230px,31vw,500px);right:4%;top:8%}
.motion-ring-two{width:clamp(130px,18vw,290px);height:clamp(130px,18vw,290px);right:21%;top:28%;border-color:rgba(255,255,255,.1);animation-delay:-4s;animation-duration:11s}
.motion-block{position:absolute;width:clamp(60px,8vw,120px);height:clamp(120px,16vw,250px);right:8%;top:30%;background:linear-gradient(180deg,rgba(192,169,142,.3),rgba(192,169,142,.02));transform:rotate(24deg);mix-blend-mode:screen;animation:block-pulse 7s ease-in-out infinite alternate}
.hero h1{position:relative;text-shadow:0 15px 45px rgba(0,0,0,.22)}
.hero h1:after{content:"";display:block;width:clamp(80px,12vw,170px);height:5px;margin-top:1.1rem;background:linear-gradient(90deg,var(--secondary-color) 0 70%,transparent 70%);box-shadow:36px 0 0 rgba(255,255,255,.22)}
.hero-aside{background:linear-gradient(90deg,rgba(41,45,50,.9),rgba(41,45,50,.54));backdrop-filter:blur(5px)}
.scroll-cue{position:absolute;left:clamp(1.25rem,4vw,3rem);bottom:1.2rem;display:flex;align-items:center;gap:.65rem;color:#e0e2e4;font-size:.72rem;letter-spacing:.18em;text-decoration:none;text-transform:uppercase}
.scroll-cue span{position:relative;width:42px;height:1px;background:rgba(255,255,255,.28);overflow:hidden}
.scroll-cue span:after{content:"";position:absolute;inset:0;background:var(--secondary-color);transform:translateX(-100%);animation:scroll-line 2.2s ease-in-out infinite}
@keyframes word-drift{to{transform:translate3d(-1.5%, -1.5%,0)}}
@keyframes ring-float{to{transform:translate3d(-18px,20px,0) rotate(18deg)}}
@keyframes block-pulse{to{transform:translate3d(-15px,18px,0) rotate(31deg);opacity:.5}}
@keyframes scroll-line{50%,100%{transform:translateX(100%)}}
@media(max-width:959px){.motion-ring-one{right:-12%;top:4%}.motion-ring-two{right:18%;top:13%}.motion-block{right:4%;top:18%}.hero:before{inset:4% -10% 5% 18%}.hero-aside{background:rgba(41,45,50,.78)}}
@media(max-width:600px){.motion-word{right:-.08em;bottom:.02em;font-size:65vw}.motion-ring-one{right:-30%;top:8%}.motion-ring-two{display:none}.motion-block{top:10%;opacity:.6}.scroll-cue{display:none}.hero h1:after{height:3px}}
@media(prefers-reduced-motion:reduce){.motion-word,.motion-ring,.motion-block,.scroll-cue span:after{animation:none}}

/* Individueller Mauszeiger */
@media(hover:hover) and (pointer:fine){
  body,body a,body button,body input,body textarea,body select,body summary{cursor:none}
  .custom-cursor-dot,.custom-cursor-ring{position:fixed;z-index:99999;top:0;left:0;pointer-events:none;opacity:0;will-change:transform}
  .custom-cursor-visible .custom-cursor-dot,.custom-cursor-visible .custom-cursor-ring{opacity:1}
  .custom-cursor-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--secondary-color);box-shadow:0 0 12px rgba(192,169,142,.52);transition:width .22s ease,height .22s ease,margin .22s ease,background .22s ease,opacity .2s ease}
  .custom-cursor-ring{display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(192,169,142,.85);border-radius:50%;background:rgba(192,169,142,.04);backdrop-filter:blur(1px);color:#292d32;font-size:.52rem;font-weight:700;letter-spacing:.1em;transition:width .3s ease,height .3s ease,margin .3s ease,background .3s ease,border-color .3s ease,opacity .2s ease}
  .custom-cursor-ring.is-active{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:var(--secondary-color);background:rgba(192,169,142,.2)}
  .custom-cursor-ring.is-project{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--secondary-color);border-color:var(--secondary-color)}
  .custom-cursor-ring.is-project:after{content:"ÖFFNEN"}
  .custom-cursor-ring.is-project+.custom-cursor-dot{background:#292d32;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.custom-cursor-ring{transition:none!important}}

.project-progress{display:grid;grid-template-columns:auto 1fr;gap:.8rem 1.2rem;align-items:start;max-width:720px;margin-top:1.5rem;padding:1rem 1.2rem;border:1px solid rgba(192,169,142,.35);background:rgba(192,169,142,.06);text-align:left}
.project-progress strong{color:var(--secondary-color);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.project-progress span{color:#c9ccd0;font-size:.82rem;line-height:1.45}
@media(max-width:600px){.project-progress{grid-template-columns:1fr}}

/* Lesefreundliches Dokumentlayout für die Datenschutzerklärung */
.datenschutz{max-width:900px;padding:clamp(3.5rem,7vw,6.5rem) clamp(1.25rem,4vw,3rem) clamp(5rem,9vw,8rem);font-size:1rem;line-height:1.72}
.datenschutz>header{margin:0 0 clamp(3.5rem,7vw,5.5rem);padding-bottom:1.8rem;border-bottom:1px solid var(--line)}
.datenschutz>header h1{max-width:760px;font-size:clamp(2.9rem,6vw,4.8rem);line-height:.98;text-align:left}
.datenschutz h2{margin:4.5rem 0 1.6rem;padding-top:.85rem;border-top:1px solid rgba(192,169,142,.35);color:#f5f5f3;font-family:var(--font-family-heading);font-size:clamp(1.85rem,3.2vw,2.5rem);line-height:1.15;text-align:left}
.datenschutz h3{margin:2.6rem 0 .8rem;color:var(--secondary-color);font-family:var(--font-family-base);font-size:1.28rem;font-weight:600;line-height:1.3;text-align:left}
.datenschutz h4{margin:1.8rem 0 .55rem;color:#ece6df;font-family:var(--font-family-base);font-size:1.04rem;font-weight:600;line-height:1.4;text-align:left}
.datenschutz p{margin:0 0 1.15rem;color:#d1d4d7;font-size:1rem;line-height:1.72;text-align:left}
.datenschutz ul{margin:.25rem 0 1.5rem;padding-left:1.4rem;color:#d1d4d7}
.datenschutz li{margin:.6rem 0;padding-left:.25rem}
.datenschutz a{color:#d8c2a8;text-decoration-color:rgba(216,194,168,.55);text-underline-offset:.18em;overflow:visible}
.datenschutz a:hover{color:#fff;text-decoration-color:var(--secondary-color)}
.datenschutz strong{color:#eee9e3}
.datenschutz h2:first-of-type{margin-top:0}
@media(max-width:600px){.datenschutz{font-size:.96rem}.datenschutz h2{margin-top:3.5rem}.datenschutz h3{margin-top:2.2rem}.datenschutz p{font-size:.96rem}}

/* Passendes Dokumentlayout für das Impressum */
.impressum{max-width:900px;padding:clamp(3.5rem,7vw,6.5rem) clamp(1.25rem,4vw,3rem) clamp(5rem,9vw,8rem);font-size:1rem;line-height:1.72}
.impressum>header{margin:0 0 clamp(3.5rem,7vw,5.5rem);padding-bottom:1.8rem;border-bottom:1px solid var(--line)}
.impressum>header h1{max-width:760px;font-size:clamp(2.9rem,6vw,4.8rem);line-height:.98;text-align:left}
.impressum h2{margin:3.8rem 0 .8rem;padding-top:.85rem;border-top:1px solid rgba(192,169,142,.35);color:var(--secondary-color);font-family:var(--font-family-base);font-size:1.28rem;font-weight:600;line-height:1.3;text-align:left}
.impressum h2:first-child{margin-top:0}
.impressum p{margin:0 0 1.15rem;color:#d1d4d7;font-size:1rem;line-height:1.72;text-align:left}
.impressum section>br{display:none}
.impressum a{color:#d8c2a8;text-decoration-color:rgba(216,194,168,.55);text-underline-offset:.18em;overflow:visible}
.impressum a:hover{color:#fff;text-decoration-color:var(--secondary-color)}
.impressum strong{color:#eee9e3}
@media(max-width:600px){.impressum{font-size:.96rem}.impressum h2{margin-top:3.2rem}.impressum p{font-size:.96rem}}

/* Persönliches Profilbild im Über-mich-Bereich */
.about-person{display:flex;align-items:center;gap:1.2rem;margin-bottom:.45rem}
.about-portrait{position:relative;flex:0 0 auto;width:116px;height:116px}
.about-portrait:before{content:"";position:absolute;inset:-7px;border:1px solid rgba(143,118,94,.38);border-radius:50%;transform:translate(5px,-3px)}
.about-portrait img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.about-person .eyebrow{margin:0 0 .4rem;text-align:left}
.person-name{color:#292d32;font-family:var(--font-family-heading);font-size:1.45rem;line-height:1.05;text-align:left}
.person-name span{display:block;margin-top:.38rem;color:#6a6e72;font-family:var(--font-family-base);font-size:.78rem;font-weight:400;letter-spacing:.06em}
@media(max-width:600px){.about-person{gap:1rem}.about-portrait{width:92px;height:92px}.person-name{font-size:1.25rem}.person-name span{font-size:.7rem}}

/* V36 – WCAG AA: Textkontrast auf hellen Flächen und Akzentbuttons.
   Beige bleibt als Akzentfarbe erhalten; Text darauf wird dunkel. */
.link-as-btn-secondary,
.link-as-btn-secondary:visited,
.btn-secondary,
.project-image > span { color:#292d32; }
.link-as-btn-secondary:hover,
.link-as-btn-secondary:focus-visible { color:#fff; }
.about-me .eyebrow,
.about-me-content h2 span,
.skills-grid article > span { color:#6c543d; }
.about-me .text-link:hover { color:#6c543d; }
.person-name span { color:#575b60; }
/* Auch im schmalen Layout müssen die gleichen Kontraste gelten. */
@media (max-width:600px) {
 .about-me .eyebrow,.about-me-content h2 span,.skills-grid article > span { color:#6c543d; }
}