/* Große Überschriften in Anton (gleiche Schrift wie "ABOUT ME" und die Schlüsselwörter im Balken):
   Service-Einstieg, MY WORK, Kontakt-Headline. Der Hero-Name ist bewusst dünn (Inter).
   Nur Laptop (ab 769 px). Zum Verwerfen: Link auf diese Datei in index_test.html entfernen. */
/* Hero-Hintergrund = Off-White wie bei Services (#F8F8F6, zwischen dem alten Beige und dem Weiß der About-Section); die Trennung zu About übernimmt der Schatten am unteren Rand (siehe about-neu.css) */
.hero{background:var(--color-off-white,#F8F8F6);}

/* Hero-Foto: waagerechtes Wischen zieht Wellen (wie die Maus), senkrechtes Wischen scrollt weiter die Seite */
.hero-photo-wrap{touch-action:pan-y;}

/* Filter-Symbol vor den Filtern der Work-Section */
.mw-filter-tag{display:inline-flex;align-items:center;gap:.55em;color:var(--color-gray-400,#9a9a96);font-family:var(--font-body);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:5px 0;}
/* Symbol zählt nicht zur Breite der Reihe: die Filter selbst bleiben mittig, das Symbol hängt links vor "ALL" */
.mw-filters{--mwg:clamp(16px,2.2vw,34px);}
.mw-filter-tag{position:relative;width:0;padding:0;margin-right:calc(-1 * var(--mwg));overflow:visible;}
.mw-filter-tag svg{display:block;flex:none;position:absolute;right:calc(var(--mwg) * .85);top:50%;transform:translateY(-50%);}
.mw-filter-br{display:none;}
.mw-filter-lab{display:none;}

@media (min-width:769px){
  .mw-filter-tag svg{right:calc(var(--mwg) * .75);}
  /* Laptop: links groß "FREELANCE DESIGNER" (Anton, so groß wie die Services-Überschrift); rechts klein "ANNA WAECHTER", darunter "[ Projekt anfragen ]".
     Die Oberkanten von Rolle und Name liegen auf einer Linie. */
  .hero-bottom{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:start;}
  .hero-role-big{
    display:block;grid-column:1;grid-row:1;margin:0;opacity:0;
    font-family:'Anton','Impact',sans-serif;font-weight:400;text-transform:uppercase;
    font-size:clamp(2.6rem, 6.3vw, 7rem);letter-spacing:.02em;line-height:1;white-space:nowrap;
    color:var(--color-dark,#141412);
  }
  .hero-bottom{--R:clamp(2.6rem, 6.3vw, 7rem);--F:clamp(1.7rem, 2.2vw, 2.8rem);--K:.05;}   /* R = Größe "FREELANCE DESIGNER", F = Größe "ANNA WAECHTER", K = Abstand Oberkante Zeile bis Buchstabenoberkante */
  .hero-name{
    grid-column:2;grid-row:1;justify-self:end;text-align:right;white-space:nowrap;
    font-family:'Anton','Impact',sans-serif;font-weight:400;text-transform:uppercase;color:#141412;
    font-size:var(--F);letter-spacing:.04em;line-height:1;
    margin-top:calc(var(--R) * .05 - .76px - var(--F) * var(--K));   /* Oberkante der Buchstaben = Oberkante von "FREELANCE DESIGNER" */
  }
  .hero-identity{grid-column:2;grid-row:1;align-self:start;justify-self:end;transform:none;margin-top:calc(var(--R) * .05 - .76px - var(--F) * var(--K) + var(--F) + 10px);}   /* direkt unter dem Namen */
  .hero-identity-cta{font-size:clamp(1rem, 1.2vw, 1.5rem);font-weight:400;letter-spacing:.06em;color:#3F3F3B;}
  /* Foto füllt den Platz bis zur Textzeile (vorher blieb unten ein leerer Streifen) */
  .hero-photo-wrap{height:auto;flex:1 1 auto;min-height:62vh;}
  .hero{padding-bottom:clamp(28px,3vw,48px);}   /* etwas Weißraum unter der Textzeile */
  .hero-identity-role{display:none;}
  /* Hero: Name und Rolle rücken näher ans Foto (Standard war 36px Abstand) */
  .hero{gap:clamp(14px,1.6vw,22px);}

  /* Services: nur die Einstiegs-Überschrift "SERVICES / I CAN HELP YOU WITH" in Anton.
     Der große Titel der Kategorie (z. B. "Print & Marketing") bleibt in der Schrift der Reiter darunter. */
  .svc-ov-1,.svc-ov-2{font-family:'Anton','Impact',sans-serif;font-weight:400;letter-spacing:.012em;}
  .svc-ov-1{font-size:6.3cqw;}
  .svc-ov-2{font-size:5.2cqw;}
  /* MY WORK */
  .mw-h1{
    font-family:'Anton','Impact',sans-serif;
    font-weight:400;
    font-size:clamp(40px,5vw,92px);
    letter-spacing:.015em;
  }
  /* Kontakt */
  .contact-headline{
    font-family:'Anton','Impact',sans-serif;
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(2.4rem,5.2vw,4.5rem);
    line-height:1.02;
    letter-spacing:.012em;
    max-width:34ch;
  }

  /* Services: "Projekt anfragen" – Oberkante auf Höhe der Unterzeile, rechter Rand wie der Textrand links */
  .svc-cta{ top:calc(68% + 0.45cqw); }
}

/* Handy: derselbe leise Name wie am Laptop (dünn, klein geschrieben, weit gesperrt) */
@media (max-width:768px){
  .hero-name{
    font-family:'Anton','Impact',sans-serif;
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(2.2rem, 11.5vw, 3.6rem);   /* am Handy nur "ANNA": größer, ohne mit ABOUT ME zu konkurrieren */
    letter-spacing:.02em;
    line-height:1;
    white-space:nowrap;
  }
  /* Handy: "FREELANCE DESIGNER" groß und genau so breit wie das Foto; darunter klein "Anna Waechter" links und "[ Projekt anfragen ]" rechts */
  .hero-bottom{flex-wrap:wrap;align-items:center;justify-content:space-between;row-gap:10px;padding:0;}
  .hero-role-big{
    display:block;order:1;width:100%;margin:0;opacity:0;
    font-family:'Anton','Impact',sans-serif;font-weight:400;text-transform:uppercase;
    letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--color-dark,#141412);
    font-size:calc((100vw - 40px) / 8.04);   /* Breite = Breite des Fotos */
  }
  /* "ANNA WAECHTER" und "[ PROJEKT ANFRAGEN ]": gleiche Schrift, gleiche Größe, beide in Großbuchstaben */
  .hero-name{order:2;font-family:var(--font-body);font-weight:400;text-transform:uppercase;font-size:.62rem;letter-spacing:.08em;line-height:1.2;}
  .hero-identity{order:3;margin-top:0;}
  .hero-identity-cta{font-size:.62rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;}
  .hero-identity-role{display:none;}
}
@media (max-width:375px){
  /* auch auf kleinen Phones: Name links, Rolle rechts auf einer Linie (statt untereinander) */
  .hero-bottom{flex-direction:row;gap:10px;}
  .hero-identity{text-align:right;}
}
@media (max-width:768px){

  /* MY WORK: Überschrift in Anton wie am Laptop */
  .mw-h1{
    font-family:'Anton','Impact',sans-serif;
    font-weight:400;
    font-size:clamp(34px, 10vw, 64px);
    letter-spacing:.015em;
    line-height:1;
  }
  /* MY WORK, Bildunterschrift: erst "Branding, Corporate Design", darunter das Jahr */
  .mw-meta .meta-topic{flex-direction:column-reverse;}
  .mw-meta .meta-below{margin-top:0;}
  .mw-meta .meta-date{margin-top:3px;}

  /* Services am Handy: Kategorien bleiben versteckt, solange die Einstiegs-Überschrift steht (sonst liegen beide übereinander);
     danach blendet die Überschrift aus und die Kategorien kommen. Kategorie-Titel in Fett wie am Laptop. */
  .svc-stage.intro.svc-cats-in .svc-col{opacity:0;pointer-events:none;}
  .svc-label{font-weight:700;}

  /* Services-Einstieg ("SERVICES / I CAN HELP YOU WITH") in Anton wie am Laptop; die Kategorien-Titel bleiben */
  .svc-ov-1,.svc-ov-2{font-family:'Anton','Impact',sans-serif;font-weight:400;letter-spacing:.012em;line-height:1;}
  .svc-ov-1{font-size:clamp(2.3rem, 10.5vw, 3.4rem);top:calc(38vh - 72px - 1.9rem);}
  .svc-ov-2{font-size:clamp(1.9rem, 8.6vw, 2.8rem);top:calc(38vh - 72px - 1.9rem + 1.15 * clamp(2.3rem, 10.5vw, 3.4rem));}

  /* Work-Filter am Handy: Symbol vor "ALL"; Zeile 1: Symbol, ALL, Branding & Identity – Zeile 2: Photo & Video, Digital & Print */
  .mw-filter-lab{display:none;}
  .mw-filter-br{display:block;flex-basis:100%;width:0;height:0;}
  .mw-filters{--mwg:18px;gap:2px 18px;}

  /* Kontakt-Headline in Anton, Großbuchstaben */
  .contact-headline{
    font-family:'Anton','Impact',sans-serif;
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(1.9rem, 8.2vw, 3rem);
    line-height:1.06;
    letter-spacing:.012em;
    max-width:100%;
  }
}