/* ==========================================================
   Vorschau: Aufbau 1:1 nach der Squarespace-Vorlage „Agaro“,
   Farbwelt by Franziska. Ergänzt styles.css (Schriften, Marker, Footer).
   Maße abgeleitet aus Agaro bei 1440 px Breite.
   ========================================================== */

/* ---------- Schriften ----------
   Überschriften & Kopfzeile: Newsreader (frei, Open Font License; Schriftdateien in styles.css).
   Fließtext: Figtree (frei, Open Font License). Beide lokal gehostet. */
@font-face { font-family: "Mansalva"; src: url("../fonts/mansalva-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  /* Eine Akzentfarbe für alle Markierungen (seit 2026-10-30): Rosa #f8a3c2 für Linien und Textmarker.
     Vorher: Bubblegum #ff8fcf / #ffc2e6; getestet: #ef85ab, #f1a9c3, #efa2be. Frühere Zusatzfarben: Gelb #fffdbc, Hellblau #d9f1fa */
  --accent: #f8a3c2;
  --accent-soft: #f8a3c2;
  --lemon: var(--accent);
  --lemon-soft: var(--accent-soft);
  --bubblegum: var(--accent);
  --bubblegum-soft: var(--accent-soft);
  --sky: var(--accent-soft);
  --sky-line: var(--accent);
  --yellow: var(--accent-soft);
  --yellow-strong: var(--accent);
  --marker: var(--accent-soft);
  --pink-strong: var(--bubblegum);
  --pink: var(--bubblegum-soft);

  --ag-gutter: max(20px, 4vw); /* Agaro: 58 px Rand bei 1440, am Handy mindestens 20 px */
  --font-display: "Newsreader", Georgia, serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Verlauf: gleichmäßig von Off-White oben bis Taupe ganz unten */
body.ag { background: linear-gradient(180deg, #faf9f6 0%, #f1ede9 35%, #e9e4df 70%, #ddd6d0 100%); }
.ag .wrap { max-width: none; padding-inline: var(--ag-gutter); }

/* Fließtext in Figtree, Kopfzeile und Überschriften in Newsreader */
body.ag { font-family: var(--font-text); font-size: 16px; }
/* Textmarker überall im selben Gelb wie in der Fußzeile */
body.ag { --mark-bg: var(--marker); }
/* Textmarker in der Fußzeile in Hellblau (Fußzeile selbst bleibt Off-White) */
/* Fußzeile: „ganzes“ fest hellblau markiert, ohne Animation */
.ag .site-footer { --mark-bg: var(--sky); }
.hl--marker[data-static] { background-size: 100% 78%; transition: none; }
/* längere Marker im Footer dürfen umbrechen – jede Zeile bekommt ihren eigenen Marker */
.footer-statement .hl--marker { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ag .logo, .ag-h, .ag .footer-statement, .ag-marquee text { font-family: var(--font-display); }
.ag .nav a { font-family: var(--font-display); }   /* Menü in Newsreader */
.ag .nav .ag-nav-text { font-family: var(--font-text); }

/* ---------- Kopfzeile: Name links, Textlinks rechts ---------- */
.ag .site-header .wrap { height: 80px; }
.ag .logo { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -.01em; }
.ag .nav { gap: clamp(14px, 1.4vw, 22px); }
.ag .nav a { font-size: 14px; text-decoration: none; }
.ag .nav a:hover { text-decoration: underline; text-decoration-color: var(--bubblegum); text-underline-offset: 4px; }
.ag .site-header.is-scrolled { background: rgba(250, 249, 246, .85); }
/* Logo „by Franziska“ in Handschrift (Mansalva, frei unter Open Font License) */
.ag .logo { font-family: "Mansalva", var(--font-display); font-size: clamp(24px, 2vw, 30px); letter-spacing: 0; line-height: 1; }
@media (max-width: 820px) {
  .ag .site-header .wrap { height: 68px; }
  .ag .nav { background: #faf9f6; }
  .ag .nav a { font-size: 24px; }
}

/* ---------- Typo (Agaro-Größen bei 1440 px) ---------- */
.ag-h { font-weight: 300; letter-spacing: -.02em; margin: 0; }
.ag-h--hero { font-size: clamp(32px, 3.3vw, 58px); line-height: 1.1; }
/* Seitentitel auf allen Unterseiten genau so groß wie auf der Startseite */
.ag main h1.ag-h--xl { font-size: clamp(32px, 3.3vw, 58px); line-height: 1.1; }   /* 66 px */
.ag-h--xl   { font-size: clamp(32px, 4vw, 70px);  line-height: 1.12; }   /* 58 px */
.ag-h--l    { font-size: clamp(26px, 2.85vw, 50px); line-height: 1.22; } /* 41 px */
.ag-lead    { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.5; font-weight: 300; margin: 0; }
.ag-body    { font-size: 16px; line-height: 1.7; margin: 0; }
.ag-link    { display: inline-block; font-size: 16px; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ag-link:hover { text-decoration-thickness: 2px; }

/* Kreise wie mit einem Stift gezogen, hinter der Schrift */
.ag .hl--circle path { stroke-width: 3.8; }   /* volle Farbe, liegt hinter der Schrift */
/* Über-mich-Seite: startet oben in Taupe (Kontrast zur Startseite), wird nach unten leicht heller;
   die Off-White-Fußzeile hebt sich weiterhin ab */
body.ag.ag-about { background: linear-gradient(180deg, #ddd6d0 0%, #e2dcd7 45%, #ebe7e3 100%); }
/* Über-mich-Seite: dünnere Kreise */
.ag-about .hl--circle path { stroke-width: 2.8; }
/* Wellenlinie im selben Marker-Look wie die Kreise */
.ag .hl--wave > svg { mix-blend-mode: multiply; }
.ag .hl--wave path { stroke-width: 7; stroke-opacity: .9; }
/* Gelbe Linien in eurem Markengelb #fffdbc: etwas dicker und ohne Einmisch-Effekt,
   damit das helle Gelb als heller Strich auf dem Taupe sichtbar bleibt */
.ag .hl[data-color="yellow"]:not(.hl--marker) { --hl-color: var(--lemon); }
.ag .hl[data-color="yellow"]:not(.hl--marker) > svg { mix-blend-mode: normal; }
.ag .hl--circle[data-color="yellow"] path { stroke-width: 8; stroke-opacity: 1; }
.ag .hl--wave[data-color="yellow"] path { stroke-width: 9; stroke-opacity: 1; }
/* schmaler, dünnerer Kreis (z. B. gelb um „übernehmen“) */
.ag .hl--circle.hl--slim > svg { left: -5%; top: -14%; width: 110%; height: 132%; }
.ag .hl--circle.hl--slim[data-color="yellow"] path { stroke-width: 5.5; }
.ag .hl--circle.hl--slim[data-color="yellow"] > svg { mix-blend-mode: multiply; opacity: .8; }   /* Schrift scheint durch den Kreis */
.ag .hl--marker[data-color="sky"] { background-image: linear-gradient(var(--sky), var(--sky)); }
.ag .hl[data-color="sky"]:not(.hl--marker) { --hl-color: var(--sky-line); }

/* ---------- Bildformen: ruhig, ohne Wolken ---------- */
.ag-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shape-round { border-radius: clamp(28px, 4.2vw, 60px); overflow: hidden; }          /* Hero: 60 px */
.shape-arch  { border-radius: 999px 999px clamp(28px, 4.2vw, 60px) clamp(28px, 4.2vw, 60px); overflow: hidden; }
.shape-blob  { border-radius: 52% 48% 46% 54% / 58% 56% 44% 42%; overflow: hidden; } /* weiche Ei-Form */

/* ---------- Pfeil-Raster: Pfeil-Spalte 154 px, Inhalt ab 30 % ---------- */
.ag-split { display: grid; grid-template-columns: minmax(0, 385fr) minmax(0, 925fr); }
.ag-split .hand-arrow { width: clamp(84px, 10.7vw, 170px); }
/* Pfeil links vertikal mittig zur Überschrift, Text darunter in der rechten Spalte */
.ag-split--arrow-mid { align-items: center; }
.ag-split--arrow-mid .ag-split__arrow { grid-column: 1; grid-row: 1; line-height: 0; }
.ag-split--arrow-mid .ag-h { grid-column: 2; grid-row: 1; }
.ag-split--arrow-mid .ag-split__body { grid-column: 2; grid-row: 2; align-self: start; }

.ag-sec { padding-block: clamp(56px, 5.5vw, 90px); }

/* 1 Hero */
.ag-hero { padding-top: clamp(64px, 16vw, 240px); padding-bottom: clamp(40px, 5.5vw, 90px); }
.ag-hero .ag-h { max-width: 75%; }
/* Ab Tablet feste, ruhige Zeilen: „… deine Partnerin“ / „für Social-Media-Strategie,“ / „Content Creation und Management.“ */
@media (min-width: 900px) { .ag-hero .ag-h { max-width: none; } .ag-line { display: block; white-space: nowrap; } }
.ag-hero__img { margin-top: clamp(56px, 9vw, 140px); aspect-ratio: 1310 / 621; }

/* 2 Idee: zwei Textspalten 429 px, Abstand 66 px */
.ag-idea__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4.6vw, 66px); margin-top: clamp(32px, 3.5vw, 50px); }
.ag-idea__cols .ag-link { margin-top: 2.2em; }
/* Startseite „alles aus einer Hand“: kompaktere Spalten, Absätze je Spalte, Link darunter */
.ag-idea__cols--tight { column-gap: clamp(24px, 3.2vw, 46px); margin-top: clamp(26px, 2.8vw, 40px); }
.ag-idea__cols--tight > div { display: grid; gap: 1em; align-content: start; }

/* 3 Potenzial: Überschrift 704 px, 2×2 Leistungen à 264 px, Bild rechts 539 × 845 */
.ag-potential { display: grid; grid-template-columns: minmax(0, 770fr) minmax(0, 539fr); align-items: stretch; }
.ag-potential .ag-h { max-width: 704px; }
/* Beschreibungen mit gleichmäßig langen Zeilen, etwas breiter als die Zwischenüberschrift */
.ag-potential__sub { display: grid; gap: 1em; max-width: 34rem; margin-top: clamp(24px, 2.6vw, 38px); }
#services { scroll-margin-top: 80px; }
.ag-potential__img { height: 100%; min-height: 420px; }
/* Drei Leistungsbereiche untereinander: kleine Nummer links, Titel groß, Beschreibung darunter – ohne Boxen */
.ag-offer { list-style: none; margin: clamp(24px, 2.6vw, 38px) 0 0; padding: 0; max-width: 560px; display: grid; gap: clamp(24px, 2.4vw, 34px); }
.ag-offer h3 { font-size: clamp(24px, 2.25vw, 33px); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .3em; }
.ag-offer p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.ag-offer__more { margin-top: clamp(22px, 2.4vw, 34px); }
/* Foto 2 übernimmt exakt die Höhe des Textblocks links (Überschrift bis letzte Leistung) */

/* 4 + 6 Bogen-Text */
.ag-marquee { display: block; width: 100%; height: auto; overflow: visible; margin-block: clamp(32px, 8vw, 118px) 0; }
.ag-marquee text { font-family: var(--font-serif); font-weight: 300; fill: var(--ink); }
.ag-marquee .star { fill: var(--bubblegum); }
/* 4 Mehr Abstand vor „volles Potenzial“ */
.ag-sec--potential { padding-top: clamp(96px, 11vw, 180px); }
/* 5 Mehr Abstand zwischen Bogen und „Social Media muss nicht perfekt sein“, 6 mehr Abstand zur Fußzeile */
.ag-sec--after-marquee { padding-top: clamp(90px, 10vw, 160px); padding-bottom: clamp(100px, 11vw, 180px); }

/* 5 Klinge wie du selbst: Bild 649 × 502 links, Text 539 rechts */
.ag-voice { display: grid; grid-template-columns: minmax(0, 649fr) minmax(0, 121fr) minmax(0, 539fr); margin-top: clamp(32px, 3.5vw, 50px); align-items: start; }
.ag-voice__img { grid-column: 1; width: 80%; aspect-ratio: 649 / 502; }
.ag-voice__text { grid-column: 3; }
.ag-voice__text .ag-link { margin-top: 2em; }

/* Fußzeile: Satz in einer Zeile, darunter „Lass uns zusammenarbeiten ↗“ in Figtree */
.ag .footer-statement { max-width: 18em; white-space: normal; text-wrap: balance; overflow-wrap: break-word; font-size: clamp(30px, 3.6vw, 44px); margin-bottom: clamp(14px, 1.4vw, 22px); }
@media (min-width: 1280px) { .ag .footer-statement { max-width: none; white-space: nowrap; font-size: clamp(22px, 3.5vw, 54px); } }
.footer-cta-link {
  display: inline-flex; align-items: center; gap: .45em;
  margin-bottom: clamp(74px, 9.25vw, 139px);
  font-family: var(--font-text); font-size: clamp(16px, 1.25vw, 19px);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.footer-cta-link svg { transition: transform .3s var(--ease); }
.footer-cta-link:hover svg { transform: translate(3px, -3px); }
.footer-cta-link:hover { text-decoration-thickness: 2px; }

/* Untere Fußzeilen-Zeile dezenter; E-Mail ohne Markierung in Textfarbe */
.ag .footer-bottom { font-size: 13px; color: var(--ink-soft); }
.ag .footer-links a { color: var(--ink-soft); }
.ag .footer-links a:hover { color: var(--ink); }
/* E-Mail als reiner Text zum Kopieren; ein Klick markiert die ganze Adresse */
.ag .footer-email { color: var(--ink-soft); user-select: all; -webkit-user-select: all; cursor: text; }
.ag .footer-meta a { background: none; padding: 0; color: inherit; }
.ag .footer-meta a:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ag .footer-meta { justify-self: start; }
.ag .footer-links { justify-self: end; }
.ag .footer-social { gap: 7px; }
.ag .footer-social a { width: 26px; height: 26px; }
.ag .footer-social svg { width: 12px; height: 12px; }

/* ---------- Services-Seite (Aufbau nach Agaro „Services“, Maße bei 1440 px) ----------
   Pfeil links, rechte Spalte ab 30 %: große Aussage (58 px) → Foto 925 × 502 → Einleitung (41 px)
   → Leistungen untereinander (Titel 26 px, Text 16 px) */
.ag-services-page { padding-top: clamp(56px, 7vw, 110px); padding-bottom: clamp(100px, 11vw, 180px); }   /* gleicher Abstand zur Fußzeile wie auf der Startseite */
.ag-services-page__img { margin-top: clamp(32px, 3.5vw, 50px); aspect-ratio: 925 / 502; }
.ag-services-page__intro { margin-top: clamp(32px, 3.5vw, 51px); }
.ag-services-page__introtext { max-width: 870px; margin-top: clamp(8px, .9vw, 14px); font-size: 16px; line-height: 1.65; }   /* gleiche Breite und Schrift wie die Leistungstexte darunter */
.ag-service-list { list-style: none; margin: clamp(32px, 3.8vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(36px, 3.5vw, 50px); max-width: 870px; }
.ag-service-list h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.25vw, 33px); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .45em; }
.ag-service-list p { margin: 0; font-size: 16px; line-height: 1.65; }
/* Ergänzung „Beratung auch punktuell“: zart abgesetzt durch eine pinke Linie links */
.ag-service-list p.ag-service-list__extra { margin-top: 1em; padding-left: 1em; border-left: 2px solid var(--bubblegum-soft); color: var(--ink-soft); }
/* Fett hervorgehobene Schlüsselwörter in den Leistungstexten */
.ag strong, .ag b { font-weight: 700; color: var(--ink); }   /* Schlüsselwörter in allen Textblöcken */
/* kleine Nummer vor dem Titel, wie bei den Leistungen auf der Startseite */
.ag-service-list__nr, .ag-offer__nr { display: inline-block; margin-right: .75em; font: 400 13px/1 var(--font-text); letter-spacing: .1em; color: var(--ink-soft); vertical-align: .45em; }

/* ---------- Rechtstexte (Impressum, Datenschutz) im neuen Design ---------- */
.ag-legal { padding-top: clamp(56px, 7vw, 110px); padding-bottom: clamp(100px, 11vw, 180px); }
.ag .legal { max-width: 46rem; font-size: 16px; line-height: 1.7; }
.ag .legal h1 { margin-bottom: 1em; }
.ag .legal h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(21px, 1.6vw, 25px); margin: 2em 0 .5em; }
.ag .legal ul { padding-left: 1.2em; }
.ag .legal .todo { background: var(--lemon); }

/* ---------- Textmarker-Button ----------
   Im Ruhezustand ein kurzer rosa Markerstrich am Anfang, beim Hovern zieht sich das Rosa über den ganzen Text.
   Auf Touch-Geräten (kein Hover) ist er direkt voll markiert. */
.ag-marker-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .35em .55em;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.ag-marker-btn::before {
  content: ""; position: absolute; inset: .28em 0 .2em; z-index: -1;
  background: var(--bubblegum-soft);
  border-radius: .3em .55em .4em .5em / .55em .35em .6em .4em;
  transform-origin: left center; transform: scaleX(.16);
  transition: transform .7s cubic-bezier(.55, .05, .3, 1);
}
.ag-marker-btn:hover::before, .ag-marker-btn:focus-visible::before { transform: scaleX(1); }
.ag-marker-btn svg { width: .62em; height: .62em; transition: transform .3s var(--ease); }
.ag-marker-btn:hover svg, .ag-marker-btn:focus-visible svg { transform: translate(3px, -3px); }
@media (hover: none) { .ag-marker-btn::before { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ag-marker-btn::before { transition: none; } }

/* Abschluss der Services-Seite: Bogen-Text und Button (wie bei Agaro) */
.ag-marquee--services { margin-top: clamp(8px, 4.3vw, 66px); }  /* Bogen minimal höher als auf der Startseite */
.ag-closing { text-align: center; padding: clamp(64px, 9vw, 130px) var(--ag-gutter) clamp(100px, 11vw, 180px); }

/* ---------- Über-mich-Seite (Aufbau nach Agaro „Über uns“, Maße bei 1440 px) ----------
   Große Aussage (66 px) → Foto 1310 × 660 → Pfeil, Aussage (41 px), zwei Textspalten */
.ag-about-hero { padding-top: clamp(64px, 12vw, 180px); }
.ag-about-hero .ag-h { max-width: 75%; }
/* volle Breite wie ursprünglich, aber etwas flacher (1310 × 560 statt 660) */
.ag-about__img { margin-top: clamp(40px, 5.5vw, 79px); aspect-ratio: 1310 / 560; }
.ag-about__img img { object-position: 50% 32%; }
.ag-about-story { padding-top: clamp(56px, 5.5vw, 79px); padding-bottom: clamp(100px, 11vw, 180px); }
@media (max-width: 820px) {
  .ag-about-hero .ag-h { max-width: none; }
  .ag-about__img { aspect-ratio: 3 / 2; }  /* auch am Handy Querformat, nur etwas weniger flach */
}

/* ---------- Projekte-Seite (nach Agaro „Was wir tun“, Maße bei 1440 px) ----------
   Überschrift zentriert (58 px) → Projekte im Zickzack: Bild 484 px links,
   nächstes Bild 484 px rechts und etwas tiefer, darunter je ein Satz (26 px) */
.ag-pj { padding-top: clamp(56px, 7vw, 110px); padding-bottom: clamp(100px, 11vw, 180px); }
.ag-pj__title { text-align: center; margin-bottom: clamp(56px, 6.2vw, 90px); }
/* Zwei schmale Projekt-Blöcke, zusammen mittig auf der Seite */
.ag-pj__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; column-gap: clamp(60px, 12.5vw, 190px);  /* großzügiger Abstand in der Mitte */ row-gap: clamp(56px, 7vw, 100px); }
.ag-pj__item { grid-column: 1; }
.ag-pj__item:nth-child(even) { grid-column: 2; margin-top: clamp(64px, 12vw, 180px); }  /* etwas stärker versetzt */
.ag-pj__img { display: block; }
/* Mockups frei stehend: transparenter Hintergrund, keine Bildform; 30 % kleiner als die Spalte */
/* Mockup mittig über dem Text. Die Bilddatei hat einen transparenten Rand für die Schatten,
   deshalb ist sie etwas breiter als der Textblock – sichtbar bleibt das Mockup knapp schmaler als der Text. */
.ag-pj__img img { display: block; width: 104.5%; max-width: none; height: auto; margin-inline: -2.25%; }
.ag-pj__img img { transition: transform 1s var(--ease); }
.ag-pj__item a:hover img { transform: scale(1.03) translateY(-4px); }
.ag-pj__num { display: block; font-size: 13px; letter-spacing: .08em; color: var(--ink-soft); margin: 1.2em 0 .4em; }
.ag-pj__text { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; letter-spacing: -.01em; margin: 0; }  /* Zeilen nutzen die volle Breite unter dem Mockup */
.ag-pj__item a { color: inherit; text-decoration: none; }
@media (max-width: 820px) {
  .ag-pj__grid { grid-template-columns: minmax(0, 400px); }
  .ag-pj__item, .ag-pj__item:nth-child(even) { grid-column: 1; margin-top: 0; }
}

/* ---------- Projekt-Detailseiten ---------- */
.ag-case { padding-top: clamp(48px, 6vw, 96px); }
.ag-back { display: inline-flex; align-items: center; gap: .45em; font-size: 15px; text-decoration: none; margin-bottom: clamp(28px, 3vw, 44px); }
.ag-back:hover { text-decoration: underline; text-decoration-color: var(--bubblegum); text-underline-offset: 4px; }
.ag-case .ag-h { max-width: 75%; }
/* Leistungen · Rolle · Zeitraum als ruhige Zeile ohne Linien */
.ag-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px clamp(24px, 3vw, 48px); margin: clamp(32px, 3.5vw, 50px) 0 0; max-width: 1100px; }
.ag-facts dt { font-size: 13px; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .35em; }
.ag-facts dd { margin: 0; font-size: 16px; line-height: 1.5; }
.ag-facts a { text-underline-offset: 4px; }
.ag-case__img { margin-top: clamp(40px, 5.5vw, 79px); aspect-ratio: 1310 / 560; }
/* Website-Vorschau an Stelle des ersten Bildes, so breit wie die Angaben-Zeile */
.ag-case__gallery { margin-top: clamp(40px, 5.5vw, 79px); max-width: 1100px; }
.ag-case__body { padding-top: clamp(56px, 6vw, 96px); }

/* Umschalter zwischen zwei Bereichen (z. B. Content / Digitales Produkt) */
.ag-tabs { display: flex; gap: clamp(16px, 2vw, 28px); margin: clamp(56px, 6vw, 96px) 0 clamp(28px, 3vw, 44px); }
.ag-tab {
  position: relative; isolation: isolate; border: 0; background: none; cursor: pointer; padding: .2em .45em;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2vw, 30px); color: var(--ink-soft);
}
.ag-tab::before { content: ""; position: absolute; inset: .28em 0 .18em; z-index: -1; background: var(--bubblegum-soft); border-radius: .3em .55em .4em .5em / .55em .35em .6em .4em; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.55, .05, .3, 1); }
.ag-tab[aria-selected="true"] { color: var(--ink); }
.ag-tab[aria-selected="true"]::before { transform: scaleX(1); }
.ag-tab:hover { color: var(--ink); }
.ag-panel[hidden] { display: none; }
.ag-panel__intro { max-width: 40rem; margin: 0 0 clamp(28px, 3vw, 40px); }

/* Reels und Browser-Rahmen mit runden Ecken wie die Fotos */
.ag .video { border-radius: clamp(16px, 2vw, 28px); }
.ag .browser { border-radius: clamp(14px, 1.8vw, 24px); overflow: hidden; }

/* Abschluss: zum nächsten Projekt */
.ag-next { padding: clamp(80px, 9vw, 140px) 0 clamp(100px, 11vw, 180px); text-align: center; }
.ag-next__label { display: block; font-size: 13px; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: .6em; }
@media (max-width: 820px) {
  .ag-case .ag-h { max-width: none; }
  .ag-case__img { aspect-ratio: 3 / 2; }
}

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  .ag-hero .ag-h { max-width: none; }
  .ag-hero__img { aspect-ratio: 3 / 2; }  /* auch am Handy Querformat, wie auf der Über-mich-Seite */
  .ag-split { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ag-split--arrow-mid .ag-split__arrow, .ag-split--arrow-mid .ag-h, .ag-split--arrow-mid .ag-split__body { grid-column: 1; grid-row: auto; }  /* minmax verhindert, dass breite Inhalte (z. B. wischbare Reels) die Spalte aufdrücken */
  .ag .videos { padding-inline: var(--ag-gutter); margin-inline: calc(var(--ag-gutter) * -1); }
  .ag-idea__cols { grid-template-columns: 1fr; row-gap: 1em; }
  .ag-potential { grid-template-columns: 1fr; row-gap: 40px; }
  .ag-potential__img { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-width: 440px; }
  .ag-voice { grid-template-columns: 1fr; row-gap: 32px; }
  .ag-voice__img, .ag-voice__text { grid-column: 1; }
  .ag-voice__img { width: 100%; max-width: 420px; }
}
@media (max-width: 720px) { .ag .footer-statement { white-space: normal; font-size: clamp(26px, 7vw, 34px); } .ag .footer-links { justify-self: start; } }

/* Website-Vorschau: ganze Startseite scrollt langsam im Browserrahmen */
.scrollshot { aspect-ratio: 16 / 10; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.scrollshot::-webkit-scrollbar { display: none; }
.scrollshot img { display: block; width: 100%; height: auto; }


/* Browserrahmen im Stil heutiger Browser: kleine Ecken, weiße Leiste, Adressfeld mittig */
.ag-case__gallery .browser {
  max-width: none; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px rgba(42, 38, 35, .1), 0 30px 70px -36px rgba(42, 38, 35, .35);
}
.ag-case__gallery .browser__bar {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 0;
  height: 44px; padding: 0 16px; background: #fff; border-bottom: 1px solid rgba(42, 38, 35, .08); color: rgba(42, 38, 35, .45);
}
.ag-case__gallery .browser__bar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ag-case__gallery .browser__dots { display: inline-flex; gap: 7px; align-items: center; }
.ag-case__gallery .browser__bar i { width: 11px; height: 11px; border-radius: 50%; }
.ag-case__gallery .browser__bar i:nth-child(1) { background: #ff5f57; }
.ag-case__gallery .browser__bar i:nth-child(2) { background: #febc2e; }
.ag-case__gallery .browser__bar i:nth-child(3) { background: #28c840; }
.ag-case__gallery .browser__nav { display: inline-flex; gap: 14px; margin-left: 22px; }
.ag-case__gallery .browser__url {
  justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: min(100%, 360px);
  margin: 0; padding: 6px 12px; border-radius: 7px; background: #f3f2f0;
  font: 12.5px/1.2 var(--font-text); color: rgba(42, 38, 35, .7);
}
.ag-case__gallery .browser__url svg { width: 11px; height: 11px; }
.ag-case__gallery .browser__reload { display: flex; justify-content: flex-end; width: 111px; } /* gleich breit wie links, damit die Adresse mittig steht */
@media (max-width: 600px) {
  .ag-case__gallery .browser__bar { grid-template-columns: auto minmax(0, 1fr) 34px; height: 36px; padding: 0 10px; }
  .ag-case__gallery .browser__nav, .ag-case__gallery .browser__reload { display: none; }
  .ag-case__gallery .browser__bar i { width: 8px; height: 8px; }
  .ag-case__gallery .browser__dots { gap: 5px; width: 34px; }
  .ag-case__gallery .browser__url { font-size: 11px; padding: 4px 10px; }
}

/* Workbook-Band (Jana): Seiten nebeneinander über die ganze Breite, gleiten beim Scrollen */
.wb { margin-top: clamp(40px, 5.5vw, 79px); }
.wb-strip { margin-inline: calc(var(--ag-gutter) * -1); overflow: hidden; padding: 6px 0 40px; cursor: grab; touch-action: pan-y; user-select: none; }
.wb-strip:active { cursor: grabbing; }
.wb-strip img { -webkit-user-drag: none; pointer-events: none; }
.wb-strip__track { display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content; padding-inline: var(--ag-gutter); will-change: transform; }
.wb-strip img { height: clamp(220px, 25vw, 380px); width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(42, 38, 35, .08), 0 18px 40px -24px rgba(42, 38, 35, .35); }

/* Tab „Digitales Produkt“: drei Workbook-Seiten im gleichen Raster wie die Reels */
.wb-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.wb-pages img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(42, 38, 35, .08), 0 18px 40px -24px rgba(42, 38, 35, .35); }

/* Instagram-Karussell (Jana): wischbare Slides im 4:5-Format, Zähler oben rechts, Punkte darunter */
.ig-carousels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.ig-carousels:has(> :only-child) { grid-template-columns: minmax(0, 360px); }   /* ein einzelnes Karussell etwas größer */
.ig-carousel { position: relative; }
.ig-carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  aspect-ratio: 4 / 5; border-radius: clamp(16px, 2vw, 28px); background: #ebe8e1;
}
.ig-carousel__track::-webkit-scrollbar { display: none; }
.ig-carousel__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.ig-carousel__count {
  position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 99px;
  background: rgba(42, 38, 35, .55); color: #fff; font: 12px/1.4 var(--font-text); letter-spacing: .03em;
}
.ig-carousel__btn {
  position: absolute; top: calc(50% - 14px); transform: translateY(-50%); width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; background: none; color: var(--ink); cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
.ig-carousel:hover .ig-carousel__btn, .ig-carousel__btn:focus-visible { opacity: .6; }
.ig-carousel .ig-carousel__btn:hover { opacity: 1; }
.ig-carousel__btn[disabled] { visibility: hidden; }
.ig-carousel__btn--prev { left: 4px; }
.ig-carousel__btn--next { right: 4px; }
.ig-carousel__dots { display: flex; justify-content: center; gap: 5px; padding-top: 12px; }
.ig-carousel__dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(42, 38, 35, .2); transition: background .2s; }
.ig-carousel__dots span.is-on { background: rgba(42, 38, 35, .7); }
@media (hover: none) { .ig-carousel__btn { display: none; } }
@media (max-width: 600px) { .ig-carousels:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } }

/* Schwebender Button „Kennenlernen buchen“: erscheint nach dem ersten Bildschirm, verschwindet am Footer */
.fab-book {
  position: fixed; z-index: 40; right: max(16px, calc(var(--ag-gutter) * .6)); bottom: max(16px, calc(var(--ag-gutter) * .6));
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 12px 15px;
  border-radius: 99px; background: #fff; color: var(--ink); text-decoration: none;
  font: 400 14.5px/1 var(--font-text); letter-spacing: .01em;
  box-shadow: 0 0 0 1px rgba(42, 38, 35, .08), 0 14px 34px -14px rgba(42, 38, 35, .35);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.fab-book.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.fab-book svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fab-book svg circle { fill: var(--sky-line); stroke: none; }
.fab-book__text { position: relative; isolation: isolate; padding: 2px 3px; }
/* gerader, ruhiger Unterstrich in Pink – ohne Animation */
.fab-book__text::before { content: none; }
.fab-book:hover { box-shadow: 0 0 0 1px rgba(42, 38, 35, .12), 0 18px 40px -14px rgba(42, 38, 35, .45); }
@media (prefers-reduced-motion: reduce) { .fab-book, .fab-book__text::before { transition: none; } }

/* Wörter mit Bindestrich nicht mitten im Wort umbrechen */
.nowrap { white-space: nowrap; }

/* Mauszeiger als kleiner Punkt (nur mit Maus/Trackpad, nicht auf Touch-Geräten) */
@media (hover: hover) and (pointer: fine) {
  html.has-dot, html.has-dot * { cursor: none !important; }
}
.cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; border-radius: 50%;
  background: rgba(248, 163, 194, .55); opacity: 0;   /* rosa, leicht durchscheinend; Größe bleibt immer gleich */
  transition: width .25s ease, height .25s ease, margin .25s ease, background-color .25s ease, opacity .2s ease;
}
.cursor-dot.is-on { opacity: 1; }
/* der Punkt bleibt auch über Links unverändert – das Klick-Signal geben Unterstrich bzw. Farbe */

/* Über mich: „Was ich mitbringe“ – vier Stationen zum Auf- und Zuklappen */
/* Trennlinie über dem Abschnitt, etwas mehr Luft davor und danach */
.ag-about-exp { margin-top: clamp(72px, 8vw, 120px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid rgba(42, 38, 35, .14); }
.ag-about-exp__title { font-size: clamp(26px, 2.85vw, 41px); line-height: 1.2; margin: 0 0 clamp(20px, 2.2vw, 32px); }
.ag-acc { border-top: 1px solid rgba(42, 38, 35, .14); }
.ag-acc:last-of-type { border-bottom: 1px solid rgba(42, 38, 35, .14); }
.ag-acc summary {
  display: flex; align-items: baseline; gap: .75em; padding: clamp(18px, 1.8vw, 24px) 0;
  list-style: none; cursor: pointer;
}
.ag-acc summary::-webkit-details-marker { display: none; }
.ag-acc__nr { font: 400 13px/1 var(--font-text); letter-spacing: .1em; color: var(--ink-soft); position: relative; top: -.35em; }
.ag-acc__title { flex: 1; font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.25; letter-spacing: -.01em; }
/* Plus, das sich beim Öffnen zum Kreuz dreht */
.ag-acc__icon { position: relative; flex: none; width: 16px; height: 16px; align-self: center; transition: transform .35s ease; }
.ag-acc__icon::before, .ag-acc__icon::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: var(--ink); }
.ag-acc__icon::after { transform: rotate(90deg); }
.ag-acc[open] .ag-acc__icon { transform: rotate(45deg); }
.ag-acc__body p { margin: 0; padding: 0 2.2em clamp(20px, 2vw, 28px) 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 640px; }
/* weiches Aufklappen in Browsern, die das schon können */
.ag-acc { interpolate-size: allow-keywords; }
.ag-acc::details-content { block-size: 0; overflow: hidden; transition: block-size .4s ease, content-visibility .4s allow-discrete; }
.ag-acc[open]::details-content { block-size: auto; }
@media (max-width: 600px) { .ag-acc__body p { padding-right: 0; } }

/* Unterüberschriften (Leistungen, Stationen) in Figtree halbfett – große Headlines bleiben in Newsreader */
.ag .ag-offer h3, .ag .ag-service-list h2, .ag .ag-acc__title {
  font-family: var(--font-text); font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: 0; line-height: 1.3;
}
.ag .ag-service-list__nr, .ag .ag-offer__nr { vertical-align: .1em; }
.ag .ag-acc__nr { top: -.1em; }

/* Leistungen: Bereiche gleiten beim Scrollen nacheinander von unten herein (Titel zuerst, dann Text) */
.js .reveal--rise { transform: translateY(70px); transition: opacity 1s ease-out, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.js .reveal--rise > * { opacity: 0; transform: translateY(18px); transition: opacity .9s ease-out, transform 1s cubic-bezier(.2, .8, .2, 1); }
.js .reveal--rise.is-visible > * { opacity: 1; transform: none; }
.js .reveal--rise.is-visible > :nth-child(2) { transition-delay: .18s; }
.js .reveal--rise.is-visible > :nth-child(3) { transition-delay: .32s; }
.js .reveal--rise.no-anim > * { transition: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal--rise, .js .reveal--rise > * { opacity: 1; transform: none; transition: none; } }

/* Drei Leistungen auf der Startseite: erscheinen nacheinander aus der Unschärfe */
.js .reveal--blur { opacity: 0; filter: blur(14px); transform: translateY(28px); transition: opacity 1s ease-out, filter 1.1s ease-out, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.js .reveal--blur.is-visible { opacity: 1; filter: none; transform: none; }
.js .reveal--blur.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal--blur { opacity: 1; filter: none; transform: none; transition: none; } }

/* Laufender Balken (Startseite) */
.ag-band { --band-bg: #2a2623; --band-fg: #faf9f6; --band-dot: var(--bubblegum);
  overflow: hidden; margin-block: clamp(56px, 7vw, 110px) 0; padding: clamp(14px, 1.4vw, 20px) 0; background: var(--band-bg); color: var(--band-fg); }
.ag-band__track { display: flex; width: max-content; animation: ag-band 38s linear infinite; }
.ag-band__track span { font: 300 clamp(24px, 2.4vw, 36px)/1.2 var(--font-display); letter-spacing: -.01em; white-space: nowrap; padding-right: 1.4em; }
.ag-band__track span::after { content: "●"; color: var(--band-dot); font-size: .45em; vertical-align: .35em; margin-left: 1.4em; }
@keyframes ag-band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ag-band__track { animation: none; } }



/* Startseite: drei Leistungen zum Aufklappen, Plus vorne */
.ag-plus-list { margin-top: clamp(36px, 4vw, 56px); max-width: 560px; border-top: 1px solid rgba(42, 38, 35, .14); }
.ag-plus { border-bottom: 1px solid rgba(42, 38, 35, .14); }
.ag-plus summary { display: flex; align-items: center; gap: .9em; padding: clamp(16px, 1.6vw, 22px) 0; list-style: none; cursor: pointer;
  font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--font-text); }
.ag-plus summary::-webkit-details-marker { display: none; }
.ag-plus__icon { position: relative; flex: none; width: 14px; height: 14px; transition: transform .35s ease; }
.ag-plus__icon::before, .ag-plus__icon::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: var(--ink); }
.ag-plus__icon::after { transform: rotate(90deg); }
.ag-plus[open] .ag-plus__icon { transform: rotate(45deg); }
.ag-plus p { margin: 0; padding: 0 0 clamp(16px, 1.6vw, 22px) calc(14px + .9em); font-size: 16px; line-height: 1.7; color: var(--ink); }   /* wie der Text darüber */
.ag-plus { interpolate-size: allow-keywords; }
.ag-plus::details-content { block-size: 0; overflow: hidden; transition: block-size .4s ease, content-visibility .4s allow-discrete; }
.ag-plus[open]::details-content { block-size: auto; }

/* Einblenden beim Scrollen – deutlicher, wie bei hello darling: von unten aus der Unschärfe, Absätze nacheinander */
.js .reveal { opacity: 0; transform: translateY(44px); filter: blur(6px);
  transition: opacity 1s ease-out, transform 1.15s cubic-bezier(.2, .8, .2, 1), filter 1s ease-out; }
.js .reveal.is-visible { opacity: 1; transform: none; filter: none; }
.js .reveal.no-anim { transition: none; }
.js .ag-idea__cols.reveal > *, .js .ag-potential__sub.reveal > * { opacity: 0; transform: translateY(24px); transition: opacity .9s ease-out, transform 1s cubic-bezier(.2, .8, .2, 1); }
.js .ag-idea__cols.reveal.is-visible > *, .js .ag-potential__sub.reveal.is-visible > * { opacity: 1; transform: none; }
.js .ag-idea__cols.reveal.is-visible > :nth-child(2), .js .ag-potential__sub.reveal.is-visible > :nth-child(2) { transition-delay: .2s; }
.js .reveal.no-anim > * { transition: none; }
.js .ag-plus-list.reveal.is-visible .ag-plus { animation: ag-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.js .ag-plus-list.reveal.is-visible .ag-plus:nth-child(2) { animation-delay: .15s; }
.js .ag-plus-list.reveal.is-visible .ag-plus:nth-child(3) { animation-delay: .3s; }
@keyframes ag-rise { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal > *, .js .ag-plus { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
}

/* Leistungen-Seite: jede Leistung mit feiner Linie darüber und großer, heller Nummer in der Serifenschrift */
.ag-service-list { gap: 0; }
.ag-service-list > li { border-top: 1px solid rgba(42, 38, 35, .16); padding: clamp(28px, 3vw, 44px) 0 clamp(32px, 3.4vw, 50px); }
.ag-service-list > li:last-child { border-bottom: 1px solid rgba(42, 38, 35, .16); }
.ag .ag-service-list .ag-service-list__nr {
  display: block; margin: 0 0 .35em; vertical-align: 0;
  font: 300 clamp(36px, 3.4vw, 52px)/1 var(--font-display); letter-spacing: -.01em; color: #b2a79d;
}

/* Überschrift auf Laptop und größer in einer Zeile */
@media (min-width: 900px) { .ag-h--oneline { white-space: nowrap; } }

/* Neue Markierungen (2026-10-30) */
.hl--swipe > svg { left: -2%; bottom: -.22em; width: 104%; height: .42em; }
.hl--swipe { --hl-color: var(--pink-strong); --dur: 1.5s; }
/* in der Startseiten-Headline etwas höher und flacher, damit der i-Punkt in der Zeile darunter frei bleibt */
.ag-h--hero .hl--swipe > svg { bottom: -.1em; height: .3em; }
.hl--swipe.is-visible path { animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
.hl--line > svg { left: -1%; bottom: -.07em; width: 102%; height: .22em; }
.hl--line { --hl-color: var(--pink-strong); --dur: .9s; }
/* möglichst flacher Kreis, eng um die Wörter */
.ag .hl--circle.hl--flat > svg { left: -6%; top: -16%; width: 112%; height: 132%; }

/* Beim Überfahren: Unterstriche aller Links (Menü, „Alle Leistungen ansehen“, Footer …) und der Footer-Pfeil in Pink */
.ag a:hover { text-decoration-color: var(--bubblegum); }
.ag .footer-cta-link:hover svg { color: var(--bubblegum); }
.ag .footer-links a:hover { text-decoration: underline; text-decoration-color: var(--bubblegum); text-underline-offset: 3px; }

/* Startseite: laufender Balken statt Bogen – Taupe, Serifenschrift */
.ag-band--home { --band-bg: #ddd6d0; --band-fg: var(--ink); }   /* Taupe aus dem Seitenverlauf */
.ag-band--home .ag-band__track span::after { content: none; }
.ag-band--home .ag-band__track span { padding-right: 1em; }
/* Balken auf der Startseite in Figtree halbfett – wie die Titel der aufklappbaren Liste */
.ag-band--home .ag-band__track span { font-family: var(--font-text); font-weight: 600; letter-spacing: 0; font-size: clamp(18px, 1.5vw, 21px); }   /* so groß wie die aufklappbaren Punkte */
.ag-band--home .ag-band__track { animation-duration: 40s; }   /* an die Länge der drei Sätze angepasst: gleiches Lauftempo wie vorher */
.ag-band--home { padding-block: clamp(18px, 2vw, 29px); }   /* Balken bleibt so hoch wie vorher */

/* Leistungen: Nummern 01–04 in Bubblegum-Pink */
.ag .ag-service-list .ag-service-list__nr { color: var(--bubblegum); }
/* Leistungen: Hin-und-her-Strich im Seitentitel etwas flacher, wie auf der Startseite */
.ag-services-page h1 .hl--swipe > svg { bottom: -.1em; height: .3em; }

/* Leistungen: keine Linie unter dem letzten Bereich; Abschluss-Link im Stil des Footer-Links */

/* Leistungen: schlichter, eckiger Button in Taupe, beim Überfahren pink; gleicher Abstand nach oben und unten */
.ag-closing { padding: clamp(80px, 9vw, 140px) var(--ag-gutter); }
.ag-btn { display: inline-block; padding: 1em 1.8em; background: #ddd6d0; color: var(--ink); text-decoration: none;
  font: 500 clamp(15px, 1.1vw, 17px)/1.2 var(--font-text); letter-spacing: .01em; transition: background-color .25s ease; }
.ag .ag-btn:hover, .ag .ag-btn:focus-visible { background: var(--bubblegum); text-decoration: none; }
.ag-closing { display: flex; justify-content: center; }
@media (max-width: 820px) { .ag-closing { padding-bottom: 60px; } }

/* Über mich: Einleitung zwischen Überschrift und Akkordeon */
.ag-about-exp__intro { display: grid; gap: 1em; margin-bottom: clamp(32px, 3.6vw, 52px); }

/* Über mich: Plus-Liste (wie auf der Startseite) etwas breiter */
.ag-plus-list--about { max-width: 870px; margin-top: 0; }



/* Handy-Fußzeile: Icons, darunter E-Mail, darunter Impressum · Datenschutz · © in einer Zeile */
@media (max-width: 720px) {
  .ag .footer-bottom { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "imp dat social"; justify-items: start; align-items: center; column-gap: 20px; row-gap: 8px; }
  .ag .footer-social { justify-self: end; }
  .ag .footer-links { display: contents; }
  .ag .footer-social { grid-area: social; }
  .ag .footer-email { display: none; }   /* auf dem Handy reichen Icons (inkl. Mail) und die Rechtliches-Zeile */
  .ag .footer-links a:nth-child(1) { grid-area: imp; }
  .ag .footer-links a:nth-child(2) { grid-area: dat; }
  .ag .footer-meta { display: none; }   /* Copyright auf dem Handy weggelassen */
}
/* E-Mail nie als Link unterstreichen (iPhone erkennt Adressen sonst automatisch) */
.ag .footer-email, .ag .footer-email a, a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; }

/* Startseite Handy: mehr Abstand zwischen Leistungen und Foto */
@media (max-width: 820px) { .ag-potential { row-gap: 68px; } }   /* gleicher Abstand wie vom Foto zum Balken */

/* Leistungen: keine Linie unter dem letzten Bereich */
.ag-service-list > li:last-child { border-bottom: 0; }

/* Leistungen Handy: Markierung im Titel läuft zeilenweise mit, statt über die volle Breite */
@media (max-width: 820px) {
  .ag-services-page h1 .hl--swipe { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding-bottom: .06em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%209%20C%2060%207%2C%20140%208%2C%20197%209%20C%20150%2011%2C%2080%2012%2C%2012%2013%20C%2080%2014%2C%20150%2015%2C%20192%2015%22%20fill%3D%22none%22%20stroke%3D%22%23f8a3c2%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat 0 100% / 0% .3em; transition: background-size 1.2s cubic-bezier(.55, .05, .3, 1) .3s; }
  .ag-services-page h1 .hl--swipe.is-visible { background-size: 100% .3em; }
  .ag-services-page h1 .hl--swipe > svg { display: none; }
}

/* Handy: Footer ohne „Unverbindliches Erstgespräch buchen“ – ruhiger */
@media (max-width: 720px) {
  .ag .footer-cta-link { display: none; }
  .ag .footer-statement { margin-bottom: clamp(56px, 16vw, 80px); }
}

/* Fußzeile (Laptop): kurzer Text zum Erstgespräch zwischen Satz und Link; Satz dafür etwas kleiner */
.ag .footer-intro { max-width: 46rem; margin: 0 0 clamp(18px, 1.8vw, 26px); font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
@media (min-width: 1280px) { .ag .footer-statement { font-size: clamp(22px, 2.9vw, 44px); } }
@media (min-width: 721px) {
  .ag .site-footer { padding-top: clamp(64px, 5.8vw, 96px); }   /* Fußzeile bleibt insgesamt so hoch wie vorher */
  .ag .footer-statement { margin-bottom: clamp(12px, 1.2vw, 18px); }
  .footer-cta-link { margin-bottom: clamp(56px, 7vw, 104px); }
}
@media (max-width: 720px) { .ag .footer-statement { margin-bottom: 16px; } .ag .footer-intro { font-size: 15px; margin-bottom: clamp(48px, 13vw, 64px); } }

/* Fußzeile: ein durchgehender, leicht geschwungener Strich – bricht auf schmalen Bildschirmen zeilenweise mit um */
.footer-statement .hl--line { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2012%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%207%20C%2045%204%2C%2095%209%2C%20140%206%20S%20185%204%2C%20197%206%22%20fill%3D%22none%22%20stroke%3D%22%23f8a3c2%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") no-repeat 0 100% / 0% .22em; padding-bottom: .02em; transition: background-size 1.1s cubic-bezier(.55, .05, .3, 1) .2s; }
.footer-statement .hl--line.is-visible { background-size: 100% .22em; }
.footer-statement .hl--line > svg { display: none; }

/* Handy: an der Fußzeile schrumpft der Buchen-Button zum runden Kalender-Symbol */
.fab-book__text { max-width: 12em; overflow: hidden; white-space: nowrap; transition: max-width .35s ease, opacity .25s ease; }
.fab-book--icon { padding: 14px; }
.fab-book--icon .fab-book__text { max-width: 0; opacity: 0; padding: 0; }
.fab-book--icon { gap: 0; }


/* Bogenfoto auf der Startseite etwas kleiner (eigenes Porträt): ganzer Bogen schmaler, Foto im eigenen Format */
.ag-potential__img { width: 82%; height: auto; min-height: 0; aspect-ratio: 1087 / 1447; justify-self: end; align-self: center; }
@media (max-width: 820px) { .ag-potential__img { width: 82%; max-width: 380px; aspect-ratio: 1087 / 1447; justify-self: start; } }

/* Markierungen liegen hinter der ganzen Zeile (auch hinter Satzzeichen direkt daneben) */
.hl { isolation: auto; }
:is(h1, h2, h3, p, li, summary):has(.hl) { isolation: isolate; }

/* Textmarker (Über mich: „meine Stärke“): breiter Strich hinter der Schrift, flache Enden, von links nach rechts gezogen */
.hl--highlighter { --hl-color: var(--pink-strong); --dur: .8s; }
.hl--highlighter > svg { left: -2.5%; width: 105%; bottom: .04em; height: .78em; }
.hl--highlighter path { stroke-linecap: butt; }
.hl--highlighter.is-visible path { animation-timing-function: cubic-bezier(.3, 0, .25, 1); }

/* Projekte: aufklappbare Liste mit Nummer, Name und Reel-Covern */
.ag-pj--list .ag-h--xl { margin: 0; }
.ag-pj-list { --pj-fs: clamp(24px, 2.2vw, 32px); --pj-nr: calc(var(--pj-fs) * .62 * 1.45); max-width: none; margin-top: clamp(40px, 4.6vw, 70px); }
.ag-pj-list summary { gap: 14px; font-family: var(--font-text); font-weight: 600; font-size: var(--pj-fs); line-height: 1.2; letter-spacing: -.005em; padding: clamp(22px, 2.4vw, 34px) 0; }   /* Figtree wie die Aufklapper */
.ag .ag-pj-list__nr { flex: none; width: var(--pj-nr); color: var(--bubblegum); font-size: .62em; }   /* rosa Nummer, gleiche Schrift wie der Name */
.ag-pj-list__body { padding: 0 0 clamp(28px, 3vw, 44px) calc(var(--pj-nr) + 14px); }   /* bündig mit dem Namen */
.ag-plus .ag-pj-list__body p { padding: 0; max-width: 870px; }
.ag-pj__lead { max-width: 870px; margin-top: clamp(14px, 1.4vw, 22px); font-size: 16px; line-height: 1.65; }
.ag-pj-list__head { display: grid; gap: .35em; }
.ag-pj-list__tags { font-family: var(--font-text); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--ink-soft); }
.ag-pj-list summary { align-items: baseline; }
/* Großes, schlichtes Plus ohne Kreis, etwas vom rechten Rand abgerückt; beim Öffnen wird es zum X */
.ag-pj-list summary .ag-plus__icon { --s: 26px; align-self: flex-start; margin: calc(.6em - var(--s) / 2) clamp(6px, 2vw, 32px) 0 auto; width: var(--s); height: var(--s); }
.ag-pj-list .ag-plus__icon::before, .ag-pj-list .ag-plus__icon::after { left: 0; top: calc(50% - .75px); width: 100%; height: 1.5px; }
@media (max-width: 720px) { .ag-pj-list summary .ag-plus__icon { --s: 22px; } }
/* Kein Fokus-Rahmen beim Klicken mit der Maus, nur bei Tastaturbedienung */
.ag-pj-list summary:focus:not(:focus-visible) { outline: none; }
.ag-pj-list__name { text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .25s ease; }
/* Darüberfahren wie im Menü: feine rosa Unterstreichung, Schrift bleibt dunkel */
.ag-pj-list summary:hover .ag-pj-list__name, .ag-pj-list summary:focus-visible .ag-pj-list__name { text-decoration: underline; text-decoration-color: var(--bubblegum); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Reels nebeneinander im Hochformat; weitere Videos reihen sich automatisch ein */
.ag-pj-list__reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 240px); justify-content: start; gap: clamp(24px, 2.8vw, 40px); margin-top: clamp(22px, 2.2vw, 32px); }
.ag-pj-list__reels video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #2a2623; }
/* Handy: Videos untereinander */
@media (max-width: 720px) {
  .ag-pj-list__reels { grid-auto-flow: row; grid-template-columns: minmax(0, 320px); }
  .ag-pj-list__reels video { border-radius: 10px; }
}

/* Weicher Unterstrich beim Darüberfahren – wie mit einem Tintenroller gezogen:
   leicht geschwungen, runde Enden, wird von links nach rechts gezeichnet. Gilt für Menü, Fußzeile, Links im Text und Projekttitel. */
.ag {
  --pen-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 40 4.2, 90 6.6, 140 5 S 185 4.4, 198 5.4' fill='none' stroke='%23f8a3c2' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-line-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 40 4.2, 90 6.6, 140 5 S 185 4.4, 198 5.4' fill='none' stroke='%23f8a3c2' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.ag .nav a, .ag .footer-links a, .ag .footer-meta a, .ag-back, .ag p a, .ag-link, .ag .footer-cta-link, .ag-pj-list__name {
  background-image: var(--pen-line); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% .34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .45s cubic-bezier(.3, 0, .25, 1), text-decoration-color .2s ease;
}
.ag-pj-list__name { background-image: var(--pen-line-bold); background-size: 0% .3em; text-decoration: none; padding-bottom: .12em; }
/* Menü, Fußzeile, Projekttitel: keine harte Linie mehr, nur der gezeichnete Strich */
.ag .nav a:hover, .ag .footer-links a:hover, .ag .footer-meta a:hover, .ag-back:hover,
.ag-pj-list summary:hover .ag-pj-list__name, .ag-pj-list summary:focus-visible .ag-pj-list__name { text-decoration: none; background-size: 100% .34em; }
.ag-pj-list summary:hover .ag-pj-list__name, .ag-pj-list summary:focus-visible .ag-pj-list__name { background-size: 100% .3em; }
/* Links im Text bleiben unterstrichen (erkennbar ohne Maus); beim Darüberfahren weicht die Linie dem gezeichneten Strich */
.ag p a:hover, .ag-link:hover, .ag .footer-cta-link:hover { text-decoration-color: transparent; background-size: 100% .34em; }
@media (prefers-reduced-motion: reduce) { .ag .nav a, .ag .footer-links a, .ag-back, .ag p a, .ag-link, .ag .footer-cta-link, .ag-pj-list__name { transition: none; } }


/* Projekttitel wird beim Darüberfahren rosa */
.ag-pj-list__name { transition: color .25s ease, background-size .45s cubic-bezier(.3, 0, .25, 1); }
.ag-pj-list summary:hover .ag-pj-list__name, .ag-pj-list summary:focus-visible .ag-pj-list__name { text-decoration: none; background-size: 0% .3em; color: var(--bubblegum); }

/* Alle Links werden beim Darüberfahren rosa statt unterstrichen (Menü, Text, Fußzeile) – auf allen Seiten */
.ag-hover-pink .nav a, .ag-hover-pink .footer-links a, .ag-hover-pink .footer-meta a, .ag-hover-pink p a, .ag-hover-pink .ag-link, .ag-hover-pink .footer-cta-link, .ag-hover-pink .ag-back {
  transition: color .25s ease, text-decoration-color .25s ease;
}
.ag-hover-pink .nav a:hover, .ag-hover-pink .footer-links a:hover, .ag-hover-pink .footer-meta a:hover, .ag-hover-pink p a:hover,
.ag-hover-pink .ag-link:hover, .ag-hover-pink .footer-cta-link:hover, .ag-hover-pink .ag-back:hover,
.ag-hover-pink .nav a:focus-visible, .ag-hover-pink .footer-links a:focus-visible, .ag-hover-pink p a:focus-visible, .ag-hover-pink .footer-cta-link:focus-visible {
  color: var(--bubblegum); background-size: 0% .34em; text-decoration-color: transparent;
}

/* Startseite: Titel der aufklappbaren Liste werden beim Darüberfahren rosa (Plus bleibt dunkel) */
.ag-potential .ag-plus summary { transition: color .25s ease; }
.ag-potential .ag-plus summary:hover, .ag-potential .ag-plus summary:focus-visible { color: var(--bubblegum); }
.ag-potential .ag-plus summary:focus:not(:focus-visible) { outline: none; }

/* Links mit Unterstrich (im Text, „Alle Leistungen ansehen“, „Erstgespräch buchen“): beim Darüberfahren wird auch die Linie rosa */
.ag-hover-pink p a:hover, .ag-hover-pink .ag-link:hover, .ag-hover-pink .footer-cta-link:hover,
.ag-hover-pink p a:focus-visible, .ag-hover-pink .footer-cta-link:focus-visible { text-decoration-color: var(--bubblegum); }

/* Alle aufklappbaren Listen (Startseite, Über mich, Projekte): Titel und Plus werden beim Darüberfahren rosa */
.ag-plus summary { transition: color .25s ease; }
.ag-plus .ag-plus__icon::before, .ag-plus .ag-plus__icon::after { transition: background-color .25s ease; }
.ag-plus summary:hover, .ag-plus summary:focus-visible { color: var(--bubblegum); }
.ag-plus summary:hover .ag-plus__icon::before, .ag-plus summary:hover .ag-plus__icon::after,
.ag-plus summary:focus-visible .ag-plus__icon::before, .ag-plus summary:focus-visible .ag-plus__icon::after { background: var(--bubblegum); }
.ag-plus summary:focus:not(:focus-visible) { outline: none; }

/* Fußzeile: Unterstrich unter dem Satz ist sofort da, ohne Animation */
.footer-statement .hl--line, .footer-statement .hl--line.is-visible { background-size: 100% .22em; transition: none; }

/* Schwebender Button „Erstgespräch buchen“: Schrift und Kalender werden beim Darüberfahren rosa */
.ag .fab-book { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, color .25s ease; }
.ag .fab-book:hover, .ag .fab-book:focus-visible { color: var(--bubblegum); }
.ag .fab-book:hover svg circle, .ag .fab-book:focus-visible svg circle { fill: var(--bubblegum); }

/* Logo „by Franziska“ wird beim Darüberfahren rosa */
.ag .logo { transition: color .25s ease; }
.ag .logo:hover, .ag .logo:focus-visible { color: var(--bubblegum); text-decoration: none; }

/* Startbild (finales Foto, Format 2:1): steht still, nur ganz leicht abgerundete Ecken */
.ag-hero__img--still, .ag-img--still { aspect-ratio: 2 / 1; border-radius: clamp(6px, .6vw, 10px); overflow: hidden; }
.ag-hero__img--still img, .ag-img--still img { object-position: 50% 30%; }
@media (max-width: 720px) { .ag-hero__img--still, .ag-img--still { aspect-ratio: 3 / 2; border-radius: 6px; } }
.ag-services-page__img.ag-img--still { aspect-ratio: 925 / 502; }   /* Leistungen: Rahmen behält die Größe des früheren Fotos, das Foto wird angepasst */

/* „Mehr als nur Content“: Text und Bogenfoto rücken näher zusammen (Laptop) */
@media (min-width: 821px) {
  .ag-potential { column-gap: clamp(48px, 6vw, 110px); }
  .ag-potential .ag-potential__img { justify-self: start; }
  .ag-potential .ag-potential__sub, .ag-potential .ag-plus-list { max-width: 600px; }
}

/* Farben (Nov. 2026): neutrales Off-White passend zu den Fotos, Fußzeile und Laufband rauchiges Dunkelgrau */
body.ag { --bg: #f7f7f6; }
body.ag, body.ag.ag-about { background: #f7f7f6; }
.ag .site-header.is-scrolled { background: rgba(247, 247, 246, .88); }
.ag-band--home { --band-bg: #3d3c3a; --band-fg: #f7f7f6; }
.ag .site-footer { background: #3d3c3a; color: #f7f7f6; padding-bottom: 32px; }
.ag .site-footer :is(.footer-statement, .footer-intro, .footer-cta-link, strong) { color: #f7f7f6; }
.ag .site-footer :is(.footer-bottom, .footer-links a, .footer-email, .footer-meta) { color: rgba(247, 247, 246, .66); }
.ag .site-footer .footer-social a { background: #f7f7f6; color: #3d3c3a; }
.ag .site-footer a:hover, .ag .site-footer a:hover svg { color: var(--bubblegum); }

/* Über mich: großes Foto mit nur leicht abgerundeten Ecken wie auf Startseite und Leistungen */
.ag-about__img { border-radius: clamp(6px, .6vw, 10px); overflow: hidden; }
@media (max-width: 720px) { .ag-about__img { border-radius: 6px; } }

/* Datenschutzerklärung von Dieter Datenschutz (live geladen, ohne eigene Styles) im Stil der Website */
.ag .legal .dieter-doc h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.25; margin: 2.2em 0 .6em; }
.ag .legal .dieter-doc h3 { font-family: var(--font-text); font-weight: 600; font-size: 18px; line-height: 1.35; margin: 1.8em 0 .4em; }
.ag .legal .dieter-doc h4 { font-family: var(--font-text); font-weight: 600; font-size: 16px; line-height: 1.4; margin: 1.4em 0 .3em; }
.ag .legal .dieter-doc :is(h2, h3, h4) .number-prefix-p { margin-right: .35em; }
.ag .legal .dieter-doc p { margin: 0 0 .9em; }
.ag .legal .dieter-doc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.ag .legal .dieter-doc a:hover { color: var(--bubblegum); text-decoration-color: var(--bubblegum); }
.ag .legal .dieter-doc .contractDetails > h2:first-child { margin-top: 0; }