/* ========== Fonts: lokale Einbindung Montserrat ========== */
/* Optional WOFF2 */
@font-face{
  font-family: "Montserrat";
  src:
    /* url("assets/fonts/Montserrat-Regular.woff2") format("woff2"), */
    url("assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Montserrat";
  src:
    /* url("assets/fonts/Montserrat-SemiBold.woff2") format("woff2"), */
    url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ========== Design-Variablen ========== */
:root{
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-primary: #ef9b54;
  --color-secondary: #fbbf87;
  --color-highlight: #478ac9;

  --container-max: 1100px;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --shadow-soft: 0 4px 12px rgba(0,0,0,.06);

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;

  --transition: 200ms ease;
}

/* Bevorzugt reduzierte Animationen respektieren */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* ========== Base ========== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}

.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* Fokus sichtbar und barrierearm */
:focus-visible{
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus{ 
  left: var(--space-2); 
  top: var(--space-2);
  background: var(--color-highlight);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 6px;
  z-index: 1000;
}

/* ========== Header & Navigation ========== */


/* ---------------------------------------
   Header: sticky + Vollbreites Hintergrundbild
---------------------------------------- */

/* 1) Sticky: OPAK (kein Durchscheinen), NICHT die Shorthand 'background' verwenden */
.site-header.header--sticky{
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #ffffff;    /* opak, damit nichts „durchscheint“ */
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* 2) Hintergrundbild auf eigener Klasse – diese Regel MUSS NACH der oben stehenden in der Datei kommen */

/* Bild auf dem Header selbst */
.site-header.header--hero{
  background-image: url("assets/img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 45%;   /* statt großer Pixel-Offsets */
}

/* Tablet */
@media (min-width: 768px){
  .site-header.header--hero{ background-position: center 40%; }
}

/* Desktop */
@media (min-width: 1200px){
  .site-header.header--hero{ background-position: center 35%; }
}


/* 3) Inhalt im Grid – +40px Höhe */
.header-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--space-2);
  padding-block: 26px;
  min-height: max(75px, 88px);
}

/* ---------------------------------------
   Brand: Logo + Texte ohne Hintergrund, Regular, bündig & eng
---------------------------------------- */
.brand--right{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
}
.brand__logo{
  width: 75px; height: 75px;
  display: block;
  object-fit: contain;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.brand__text{
  height: 75px;                 /* bündig zum Logo */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;      /* vertikal mittig */
  gap: 15px;                       /* enger zusammen */
  line-height: 1.0;             /* sehr eng */
  padding: 0; margin: 0;
}
.brand__line{
  display: block;
  white-space: nowrap;
  padding: 0;
  background: transparent;
  font-weight: 400;             /* Regular */
}
.brand__line--top{    font-size: clamp(1.0rem, 1.7vw, 1.18rem); }
.brand__line--bottom{ font-size: clamp(.95rem, 1.6vw, 1.12rem); }

/* ---------------------------------------
   Navigation – Menüschrift auf Regular
---------------------------------------- */
.nav__toggle{ display: none; position: absolute; }
.nav{ display: block; }
.nav__list{
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item{ margin: 0; }
.nav__link{
  text-decoration: none;
  color: inherit;
  font-weight: 600; /* Regular für Menü */
  padding: .5rem .25rem;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.nav__link:hover{
  color: var(--color-highlight);
  background: rgba(71,138,201,.08);
}

/* Burger – stabil */
.nav__burger{
  display: none;
  position: relative;
  width: 40px; height: 40px;
  border: 0; background: transparent; padding: 0;
  cursor: pointer;
  align-items: center; justify-content: center;
  z-index: 2; user-select: none;
}
.nav__burger .bar{
  position: absolute;
  left: 8px; right: 8px;
  height: 2px; background: var(--color-text);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease, top 200ms ease;
}
.nav__burger .bar--1{ top: 12px; }
.nav__burger .bar--2{ top: 19px; }
.nav__burger .bar--3{ top: 26px; }
.nav__label{
  position: absolute; right: -48px; top: 50%;
  transform: translateY(-50%);
  font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.nav__toggle:checked + .nav__burger .bar--1{ top: 19px; transform: rotate(45deg); }
.nav__toggle:checked + .nav__burger .bar--2{ opacity: 0; }
.nav__toggle:checked + .nav__burger .bar--3{ top: 19px; transform: rotate(-45deg); }

/* Mobile: Menü klappt unter dem Header aus; Bild bleibt, da auf dem Header selbst */
@media (max-width: 860px){
  .nav__burger{ display: inline-flex; }
  .nav{
    position: absolute;
    left: 0; right: 0; top: 100%;
    background-color: #ffffff; /* opak, gut lesbar */
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--shadow-soft);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform var(--transition), opacity var(--transition);
    z-index: 2;
  }
  .nav__list{
    flex-direction: column;
    padding: var(--space-2);
    gap: .25rem;
  }
  .nav__link{ padding: .75rem; border-radius: 8px; }
  .nav__toggle:checked ~ .nav{
    transform: scaleY(1);
    opacity: 1;
  }

  .header-grid{
    grid-template-columns: 1fr 0 1fr; /* Logo + Texte rechts bleiben sichtbar */
    padding-block: 26px;
  }
  .nav__label{ right: -44px; }
}

/* ---------------------------------------
   Animationen – NOCH langsamer + genaue Delays
---------------------------------------- */

@keyframes fadeRightSlowest{
  from{ opacity: 0; transform: translateX(24px); }
  to{ opacity: 1; transform: translateX(0); }
}
.animate-right-slowest{
  opacity: 0;
  animation: fadeRightSlowest 2.4s ease forwards;
}

/* Reines Fade-In (ohne Richtung) – noch langsamer */
@keyframes fadeInSlowest{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.animate-fade-slowest{
  opacity: 0;
  animation: fadeInSlowest 2.4s ease forwards;
}

/* Exakte Delays wie gewünscht */
.delay-1s{ animation-delay: 1s; }
.delay-2s{ animation-delay: 3s; }

@media (prefers-reduced-motion: reduce){
  .animate-right-slowest{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ========== Sections ========== */

/* A) Sektionstitel & -intro zentrieren – aber NICHT global den Fließtext anfassen */
.section .section__title,
.section .section__intro{
  text-align: center;
}

/* Intro-Typo feinfühlig, nutzt vorhandene Variablen */
.section .section__intro{
  margin-left: auto;
  margin-right: auto;
  max-width: 68ch;
  font-size: 1.05rem;
}

/* B) Grid-Inhalte zentriert ausrichten, OHNE bestehende Grid-Definitionen zu ersetzen */

.section__content--center{
  justify-items: center;   /* zentriert die Grid-Kinder horizontal */
}

/* C) Lesbarkeit in Cards: Text linksbündig lassen (nur wenn Grid zentriert ist) */
.section__content--center .card{
  width: 100%;
  max-width: 520px;        /* verhindert zu lange Zeilen */
  text-align: left;
}

/* D) Kleine Responsive-Feinheit: etwas flexiblerer Card-Abstand auf kleinen Screens */
@media (max-width: 700px){
  .section .section__intro{ font-size: 1rem; }
  .section__content--center .card{ max-width: 600px; }
}

/* ===== Sektionstitel: Uppercase + Unterstrich (Primärfarbe) ===== */

.section .section__title{
  display: inline-block;     /* macht die Breite „an Text“ fest */
  margin-inline: auto;       /* zentriert den Block innerhalb des Containers */
  text-align: center;        /* für mehrzeilige Titel */
  text-transform: uppercase;
  letter-spacing: .5px;
  position: relative;
  padding-bottom: .5rem;     /* Platz für Unterstrich */
}

.section .section__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;               /* exakt so lang wie der Titel */
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  transform: none;           /* wichtig: kein translateX mehr */
}

/* Titel als block mit inhaltsbasierter Breite und Auto-Margins → immer mittig,
   unabhängig von text-align der Eltern. Unterstrich folgt der Textbreite. */
.section .section__title{
  display: block;
  width: max-content;     /* Breite = Textbreite */
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
  letter-spacing: .5px;
  position: relative;
  padding-bottom: .5rem;  /* Platz für Unterstrich */
  text-align: center;     /* falls der Titel auf 2 Zeilen umbrechen sollte */
}

.section .section__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;            /* exakt so lang wie der Titel */
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* ===========================================
   Statement / Call-out Box 
   =========================================== */

.statement-callout{
  margin: 0 auto var(--space-4);
  max-width: 68ch;
  padding: 1.2rem 1.6rem;
  border-left: 6px solid var(--color-primary);
  background: rgba(239,155,84,0.08); /* Primärfarbe sehr dezent */
  border-radius: 8px;

  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

/* ========== Grids ========== */
.grid{
  display: grid;
  gap: var(--space-3);
}
.grid--4{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.grid--3{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ===== Über mich: Container-Staffelung (ganze Box + Icon verschieben) ===== */

/* Cards am Start ausrichten */
#about .grid.grid--4{ align-items: start; }

/* Jede Card bekommt einen individuellen relativen Versatz.
   So verschiebt sich der gesamte Container inklusive Icon. */
#about .grid.grid--4 > .card{
  position: relative;
  top: var(--offset, 0px);             /* <— nur DIESER Wert steuert die Verschiebung */
  transition: top var(--transition),   /* sanft, falls du später live justierst */
              box-shadow var(--transition), border-color var(--transition);
}

/* Offsets */
#about .grid.grid--4 > .card:nth-child(1){ --offset: 0px;  }
#about .grid.grid--4 > .card:nth-child(2){ --offset: 27px;  }
#about .grid.grid--4 > .card:nth-child(3){ --offset: 8px;  }
#about .grid.grid--4 > .card:nth-child(4){ --offset: 27px;  }

/* Mobile Offsets */
@media (max-width: 700px){
  #about .grid.grid--4 > .card:nth-child(1){ --offset:  6px; }
  #about .grid.grid--4 > .card:nth-child(2){ --offset: 14px; }
  #about .grid.grid--4 > .card:nth-child(3){ --offset: 10px; }
  #about .grid.grid--4 > .card:nth-child(4){ --offset: 18px; }
}

/* ========== Cards ========== */
.card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(0,0,0,.1);
}
.card__title{
  margin: 0 0 .25rem;
  font-size: 1.1rem;
}
.card__text{
  margin: 0;
  color: #333;
  text-align: center;
}

/* ========== Buttons ========== */
.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}
.btn--primary:hover{
  background: #f0a66a;
  border-color: #f0a66a;
}
.btn--outline{
  background: transparent;
  color: var(--color-highlight);
  border-color: var(--color-highlight);
}
.btn--outline:hover{
  background: rgba(71,138,201,.08);
}

/* ===== Kontakt: Buttons zentriert mit Abstand, Akzent-Füllung, weiße Schrift ===== */

/* Zentrierte Button-Reihe mit Abstand */
.contact-btns{
  justify-content: center;     /* mittig in der Zeile */
  gap: var(--space-2);         /* Abstand zwischen den Buttons */
}

/* Akzent-Variante: Füllung = Highlight, Text = weiß */
.btn--accent{
  background: var(--color-highlight);
  color: #fff;
  border-color: var(--color-highlight);
}

/* Hover leicht aufhellen */
.btn--accent:hover{
  filter: brightness(1.05);
}

/* ========== Animationen ========== */
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
.animate-in{
  opacity: 0;
  animation: fadeUp .6s ease forwards;
}
.delay-1{ animation-delay: .05s; }
.delay-2{ animation-delay: .15s; }
.delay-3{ animation-delay: .25s; }
.delay-4{ animation-delay: .35s; }
.delay-5{ animation-delay: .45s; }
.delay-6{ animation-delay: .55s; }


/* ===== Scroll-Reveal: von unten nach oben einblenden ===== */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(150px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Startzustand: leicht unten & unsichtbar */
.reveal-up{
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;   /* Performance-Hint */
}

/* Sichtbar im Viewport: animiert hoch */
.reveal-up.is-in{
  animation: revealUp 1s ease forwards;
}

/* Optional: kleine Staffelung per nth-child (Zeitversatz) */
#about .grid.grid--4 > .card.reveal-up:nth-child(1){ animation-delay: 500ms;  }
#about .grid.grid--4 > .card.reveal-up:nth-child(2){ animation-delay: 800ms; }
#about .grid.grid--4 > .card.reveal-up:nth-child(3){ animation-delay: 1000ms; }
#about .grid.grid--4 > .card.reveal-up:nth-child(4){ animation-delay: 1300ms; }

/* ===== Portfolio: 3 Zeilen × 2 Spalten, Look wie Impressum, keine Animationen ===== */

/* 2 Spalten / 3 Zeilen (bei kleineren Screens automatisch Umbruch) */
.portfolio-grid{
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  grid-auto-rows: auto; /* Höhe durch Inhalt */
  gap: var(--space-4);
}

/* Keine Animationen in dieser Sektion – falls global .animate-in existiert */
#portfolio .card,
#portfolio .portfolio-card{ animation: none !important; opacity: 1; transform: none; }

/* Box-Styling: linksbündig, neutraler Rahmen, gleiche Optik wie Cards */
#portfolio .portfolio-card{
  text-align: left;
}

/* Überschrift wie im Beispiel: Versalien + dünner Primär-Strich darunter (links ausgerichtet) */
.portfolio-card__title{
  margin: 0 0 .5rem 0;
  font-size: clamp(1.0rem, 1.6vw, 1.15rem);
  font-weight: 700;               /* SemiBold kommt aus deiner Font-Familie (600) */
  text-transform: uppercase;
  position: relative;
  padding-bottom: .5rem;
}

/*.portfolio-card__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;                    /* Länge der Linie*//*
  max-width: 100%;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}*/

/* Listen linksbündig, ordentliche Abstände */
.portfolio-card__list{
  margin: 0;
  padding-left: 1.1rem;           /* Bullet-Einzug */
  display: grid;
  gap: .45rem;                    /* Zeilenabstand */
}

/* Kleinere Screens: 1 Spalte, mehr Luft */
@media (max-width: 800px){
  .portfolio-grid{
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ========== Legal ========== */
.section--legal{
  background: linear-gradient(0deg, rgba(239,155,84,.08), rgba(239,155,84,0));
  border-top: 1px solid rgba(0,0,0,.06);
}
.legal__text{
  max-width: 70ch;
  margin: 0;
  color: #222;
}

/* ===== Impressum ===== */

#impressum .impressum-content{
  max-width: 70ch;
  margin: 0 auto;
  text-align: left;       /* explizit, da Section sonst zentriert sein kann */
}

#impressum h3{
  margin-top: 1.8rem;
  margin-bottom: .4rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

#impressum p{
  margin: 0 0 1.2rem 0;
  line-height: 1.55;
}

#impressum a{
  color: var(--color-highlight);
  text-decoration: none;
}
#impressum a:hover{
  text-decoration: underline;
}

/* ===== Datenschutzerklärung ===== */

#datenschutz .datenschutz-content{
  max-width: 75ch;
  margin: 0 auto;
  text-align: left;
}

#datenschutz h3{
  margin-top: 2rem;
  margin-bottom: .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

#datenschutz h4{
  margin-top: 1.4rem;
  margin-bottom: .3rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .2px;
}

#datenschutz p{
  margin: 0 0 1.2rem 0;
  line-height: 1.55;
}

#datenschutz a{
  color: var(--color-highlight);
  text-decoration: none;
}
#datenschutz a:hover{
  text-decoration: underline;
}

/* ========== Footer ========== */
.site-footer{
  text-align: center;
  padding-block: var(--space-3);
  background: linear-gradient(0deg, rgba(239,155,84,.08), rgba(239,155,84,0));
  border-top: 1px solid rgba(0,0,0,.06);
}
.footer__inner{
  display: block;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.footer__links a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.3);
}
.footer__links a:hover{
  color: var(--color-highlight);
  border-bottom-color: var(--color-highlight);
}

/* ===== Scroll-to-top Button ===== */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 2px solid var(--color-primary);
  background: #fff;
  color: #000;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  box-shadow: var(--shadow-soft);
  transition: opacity 220ms ease, transform 220ms ease, box-shadow var(--transition);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none; /* klicks blockieren, solange unsichtbar */
  z-index: 999; /* über Content, unter Nav/Modals falls vorhanden */
}

.to-top:hover{
  box-shadow: var(--shadow);
}

/* sichtbarer Zustand */
.to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== Über mich: Icon mittig über der Card (30x30), minimal-invasiv ===== */
#about .grid.grid--4 > .card{
  position: relative;             /* Anker für das Icon */
  padding-top: calc(var(--space-3) + 18px); /* Platz im Inhalt, damit das Icon nicht über Text „drückt“ */
}

#about .card__icon{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 75px; height: 75px;     /* tatsächliche Bildfläche */
  display: block;

  /* Badge */
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  padding: 6px;                  /* 18px + 2*6px = 30px Gesamtdurchmesser */
}

/* Abstand zwischen Titel und dem Grid in Sektionen,
   ohne globale Layouts zu beeinflussen */
.section .section__title + .section__intro,
.section .section__title + .grid,
.section .section__intro + .grid {
  margin-top: 40px;
}

/* Falls im #about eine statement-callout Box zwischen Titel und Grid ist,
   ebenfalls 40px nach unten */
.section .section__title + .statement-callout { margin-top: 40px; }
.statement-callout + .grid { margin-top: 80px; }

/* ===== Abstand zwischen allen Sektionen ===== */
section{
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Globales Smooth-Scrolling + Puffer für Sticky-Header */
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 120px); /* Fallback 120px */
}

/* verhindert, dass die erste Kinder-Margin in die Section „hineinkollabiert“ */
.section{
  overflow: auto;            /* oder: padding-top beibehalten statt margin-top */
}