/* Direction A "Éditorial" - Reisemagazin. Stand nach der Politur vom 2026-09-05
   (Rubriken ohne Nummern, Zeilenfaelle der Headlines auf die Spaltenbreite
   abgestimmt, Initiale ohne Apostroph, Forfaits-Tabelle mit flaechiger Toenung,
   Phone-Details, aktiver Nav-Punkt). Die Fassung davor liegt unter
   entwuerfe/a-editorial-v1/.
   Bildsprache: Vollformate mit hartem Beschnitt, keine Kacheln, keine runden Ecken.
   Typografie traegt: Newsreader als Display, Jost fuer Auszeichnungen. */

:root{
  --paper:#fcfbf8;
  --paper-2:#f4f1ea;
  --ink:#191713;
  --ink-2:#4e4a44;
  --ink-3:#6d6860; /* dunkelstes Warmgrau, das auf --paper noch AA erreicht (5,3:1) */
  --rule:#ddd7ca;
  --rule-2:#eae5da;
  --blue:#81caff;
  --blue-dp:#0d5f92;
  --sand:#ffe399;
  --sand-dp:#7a5c05;
  --ease:cubic-bezier(.32,.72,0,1);
  --sect:106px;        /* vertikaler Sektionsabstand, ueberall gleich */
  --ls-kicker:.22em;   /* gesperrte Jost-Versalien: Kicker/Nummern */
  --ls-meta:.16em;     /* dito: Meta-Zeilen, Labels, Navigation */
  --ls-btn:.14em;      /* dito: Buttons, Telefon */
}
/* scroll-padding: Anker duerfen nicht unter dem Sticky-Masthead verschwinden */
html{color-scheme:light; scroll-padding-top:92px; overflow-x:clip; scrollbar-color:var(--rule) var(--paper)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17.5px/1.72 Newsreader, Georgia, serif;
  -webkit-font-smoothing:antialiased;
  /* kein overflow-x:hidden mehr: html{overflow-x:clip} clippt bereits, und ein
     overflow auf body macht body zum Scroll-Container - der Sticky-Masthead
     klebte deshalb nie (verifiziert 2026-09-05). */
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:Newsreader, Georgia, serif; font-weight:400; letter-spacing:-.014em; line-height:1.06; text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1160px; margin-inline:auto; padding-inline:30px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:14px; background:var(--ink); color:var(--paper); padding:11px 18px; z-index:99}
:focus-visible{outline:2px solid var(--blue-dp); outline-offset:3px}
::selection{background:var(--sand); color:var(--ink)}

/* Einheitliche Bildstimmung: die Fotos stammen aus verschiedenen Quellen
   und springen farblich - ein Hauch Entsaettigung und Waerme zieht sie
   auf eine gemeinsame, leicht gedruckte Magazin-Anmutung zusammen. */
.cover-stack img, .band-img, .julie-img img, .strip figure img{
  filter:saturate(.86) sepia(.08) contrast(1.02);
}

/* fixed grain, never repaints while scrolling */
body::after{
  content:""; position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kicker{
  margin:0 0 20px; font:400 11.5px/1.5 Jost, sans-serif; /* 1.5: auf schmalen Phones bricht die Hero-Zeile um */
  letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--ink-3);
}
/* Rubrik: Label und kurze Hairline in einer Zeile. --rule-grow steht im CSS
   auf dem Endzustand 1, anim.js zieht die Linie von 0 hoch (Pseudo-Elemente
   sind per JS nicht greifbar, die geerbte Variable schon). */
.sect-kicker{display:flex; align-items:center; gap:16px; margin-bottom:24px; --rule-grow:1}
.sect-kicker::after{
  content:""; width:74px; height:1px; background:var(--ink);
  transform:scaleX(var(--rule-grow)); transform-origin:left;
}

/* ---------- Masthead: a newspaper rule, not a floating pill ---------- */
.masthead{border-bottom:1px solid var(--ink); background:var(--paper); position:sticky; top:0; z-index:30}
.mast-in{
  max-width:1160px; margin-inline:auto; padding:0 30px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; height:78px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand-mark{width:22px}
.brand-type{display:flex; flex-direction:column; gap:3px; line-height:1}
.brand-type b{font:400 14px/1 Jost,sans-serif; letter-spacing:var(--ls-kicker); text-transform:uppercase; white-space:nowrap}
.brand-type i{font:400 11px/1 Jost,sans-serif; font-style:normal; letter-spacing:var(--ls-meta); color:var(--ink-3)}
.masthead nav{display:flex; gap:30px; justify-self:center}
.masthead nav a{
  text-decoration:none; font:400 12.5px/1 Jost,sans-serif;
  letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--ink-2);
  padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .45s var(--ease), color .45s var(--ease);
}
.masthead nav a:hover,
.masthead nav a[aria-current="true"]{color:var(--ink); border-color:var(--ink)} /* aria-current setzt anim.js beim Scrollen */
.mast-tel{
  text-decoration:none; font:400 13px/1 Jost,sans-serif; letter-spacing:var(--ls-btn);
  color:var(--ink-2); white-space:nowrap; transition:color .45s var(--ease);
  padding-block:10px; /* Tap-Target */
  display:inline-flex; align-items:center; font-variant-numeric:tabular-nums;
}
.mast-tel svg{display:none} /* Hoerer nur auf sehr schmalen Phones, siehe unten */
.mast-tel:hover{color:var(--ink)}

/* ---------- Buttons ---------- */
.acts{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-block; text-decoration:none; padding:15px 30px; text-align:center;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  max-width:100%; overflow-wrap:anywhere;
  font:400 13px/1 Jost,sans-serif; letter-spacing:var(--ls-btn); text-transform:uppercase;
  transition:background .45s var(--ease), color .45s var(--ease), transform .3s var(--ease);
}
.btn:hover{background:var(--blue-dp); border-color:var(--blue-dp)}
.btn:active{transform:translateY(1px)}
.btn.line{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.line:hover{background:transparent; border-color:var(--ink); color:var(--ink)}

/* ---------- Cover: image bleeds off the right edge ---------- */
.cover{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:70px; padding:78px 0 96px;
  max-width:1400px; margin-inline:auto; padding-inline:30px;
}
.cover-tx{max-width:40rem}
/* Grad so gewaehlt, dass "Des voyages sur mesure," (die laengste Zeile) in der
   Spalte auf eine Zeile passt - die <br> im Markup sind der einzige Umbruch. */
.cover h1{font-size:clamp(36px,3.9vw,56px); margin:0 0 28px}
.cover h1 em{font-style:italic; color:var(--blue-dp)}
.stand{margin:0 0 36px; font-size:19px; color:var(--ink-2); max-width:36ch}
.cover-img{margin:0; position:relative}
.cover-img img{width:100%; aspect-ratio:4/5; object-fit:cover}
/* Hero-Fade: die drei Motive liegen deckungsgleich im selben Rasterfeld,
   anim.js blendet sie ineinander. Ohne JS bleibt allein das erste sichtbar. */
.cover-stack{display:grid}
.cover-stack img{grid-area:1/1}
.cover-stack img ~ img{opacity:0}

/* ---------- Métier: three text columns, hairlines between ---------- */
.metier{padding:0 0 var(--sect)}
.head{font-size:clamp(34px,4.2vw,58px); margin:0 0 52px}
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.cols article{padding:0 34px; border-left:1px solid var(--rule-2)}
.cols article:first-child{padding-left:0; border-left:0}
.cols article:last-child{padding-right:0}
.cols h3{
  font:400 13px/1.48 Jost,sans-serif; letter-spacing:var(--ls-meta); text-transform:uppercase;
  color:var(--blue-dp); margin:0 0 16px;
}
.cols p{margin:0; font-size:17px; color:var(--ink-2)}

/* ---------- Band: full-bleed image, text on the paper beside it ---------- */
.band{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch;
  background:var(--paper-2); border-block:1px solid var(--rule);
}
.band-img{width:100%; height:100%; object-fit:cover; min-height:520px}
.band-tx{padding:84px 60px 84px 56px; max-width:40rem; align-self:center}
.band-tx h2{font-size:clamp(30px,3.4vw,46px); margin:0 0 22px}
.band-tx > p{margin:0 0 34px; color:var(--ink-2); max-width:46ch}
.ledger{list-style:none; margin:0; padding:0}
.ledger li{
  display:grid; grid-template-columns:130px 1fr; gap:22px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--rule); font-size:16.5px; color:var(--ink-2);
}
.ledger li:last-child{border-bottom:1px solid var(--rule)}
.ledger span{
  font:400 11.5px/1.4 Jost,sans-serif; letter-spacing:var(--ls-meta);
  text-transform:uppercase; color:var(--sand-dp);
}

/* ---------- Marque ---------- */
.marque{padding:var(--sect) 0}
.marque-in{display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center; max-width:940px}
.marque img{width:clamp(130px,15vw,200px)}
.marque blockquote{margin:0; padding-left:52px; border-left:1px solid var(--rule)}
/* Grad so, dass "Chaque voyage porte une signature." in der Spalte auf eine Zeile passt */
.marque p{margin:0 0 18px; font-size:clamp(26px,2.6vw,36px); line-height:1.16; font-style:italic}
.marque cite{
  font:400 12px/1 Jost,sans-serif; font-style:normal;
  letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--ink-3);
}

/* ---------- Julie ---------- */
.julie{padding:0 0 var(--sect)}
.julie-in{
  max-width:1160px; margin-inline:auto; padding-inline:30px;
  display:grid; grid-template-columns:.72fr 1.28fr; gap:60px; align-items:start;
}
.julie-img{margin:0; overflow:hidden} /* Beschnittrahmen fuer das Parallax in anim.js */
.julie-img img{width:100%; aspect-ratio:3/4; object-fit:cover}
.julie-tx h2{font-size:clamp(30px,3.4vw,46px); margin:0 0 26px}
.julie-tx p{margin:0 0 18px; color:var(--ink-2); max-width:56ch}
/* Initiale als eigenes Span statt ::first-letter: das wuerde das Apostroph
   von "J'ai" mit vergroessern. Nur das J ist gross, "'ai" laeuft normal weiter. */
.dc{float:left; font:400 66px/.82 Newsreader, Georgia, serif; padding:6px 10px 0 0; color:var(--ink)}
.sign{font-style:italic; font-size:20px; color:var(--ink) !important; margin-top:26px !important}

/* ---------- Mondes: alternating full strips ---------- */
.mondes{padding:0 0 var(--sect)}
.strip{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0;
  border-top:1px solid var(--rule);
}
.strip:last-of-type{border-bottom:1px solid var(--rule)}
.strip figure{margin:0; height:100%}
.strip figure img{width:100%; height:100%; object-fit:cover; min-height:340px; max-height:470px}
/* Hover ueber den Filter statt ueber transform: das Bild "wacht auf"
   (volle Saettigung) - transform gehoert hier dem GSAP-Parallax. */
.strip figure img{transition:filter .6s var(--ease)}
.strip:hover figure img{filter:saturate(1.02) sepia(0) contrast(1.02)}
.strip > div{padding:56px clamp(30px,5vw,76px)}
.strip.flip figure{order:2}
.num{
  margin:0 0 14px; font:400 11.5px/1 Jost,sans-serif;
  letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--blue-dp);
}
.strip h3{font-size:clamp(24px,2.6vw,34px); margin:0 0 14px}
.strip p:last-child{margin:0; color:var(--ink-2); max-width:44ch}
.mondes-note{
  margin:44px 0 0; padding-left:26px; border-left:1px solid var(--sand-dp);
  color:var(--ink-2); max-width:64ch;
}

/* ---------- Forfaits: a table ---------- */
.forfaits{padding:0 0 var(--sect)}
/* Deckline der Tabelle als ::before statt border, damit sie wachsen kann */
/* Die Tabelle ragt beidseitig 20px ueber die Textkante hinaus, damit die
   getoente Zeile Luft um den Text hat statt buendig an ihm zu kleben. */
.table{position:relative; --rule-grow:1; margin-inline:-20px}
.table::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--ink);
  transform:scaleX(var(--rule-grow)); transform-origin:left;
}
.row{
  display:grid; grid-template-columns:.85fr 1.5fr auto; gap:40px; align-items:baseline;
  padding:32px 20px; border-bottom:1px solid var(--rule);
  transition:background .45s var(--ease);
}
.row:hover{background:var(--paper-2)}
/* je ein rgba-Fallback vor jeder color-mix-Zeile: aeltere Safari/Chrome
   verwerfen color-mix und wuerden sonst die Hervorhebung ganz verlieren */
.row.mark{background:rgba(255,227,153,.22)}
.row.mark{background:color-mix(in srgb, var(--sand) 22%, var(--paper))}
.row.mark:hover{background:rgba(255,227,153,.34)}
.row.mark:hover{background:color-mix(in srgb, var(--sand) 32%, var(--paper-2))}
.r-name h3{font-size:26px; margin:0 0 6px}
.r-name p{
  margin:0; font:400 11.5px/1.4 Jost,sans-serif;
  letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--ink-3);
}
.r-desc{margin:0; font-size:16.5px; color:var(--ink-2)}
.r-price{margin:0; font-size:32px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums}
/* "sur devis" nicht in Ziffern-Groesse - kursiv und ruhiger */
.row:last-child .r-price{font-size:22px; font-style:italic; color:var(--ink-2)}
.fine{margin:28px 0 0; font-size:15px; color:var(--ink-3); max-width:64ch}

/* ---------- Presse: Ausschnitte als Zeilen, gleiche Anatomie wie die Tabelle ---------- */
.presse{padding:0 0 var(--sect)}
.clips{position:relative; --rule-grow:1; margin-inline:-20px}
.clips::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--ink);
  transform:scaleX(var(--rule-grow)); transform-origin:left;
}
.clip{
  display:grid; grid-template-columns:.85fr 1.5fr; gap:40px; align-items:start;
  padding:34px 20px; border-bottom:1px solid var(--rule);
  transition:background .45s var(--ease);
}
.clip:hover{background:var(--paper-2)}
.clip-paper{margin:0 0 6px; font-size:26px; line-height:1.1; letter-spacing:-.014em}
.clip-meta{
  margin:0; font:400 11.5px/1.4 Jost,sans-serif;
  letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--ink-3);
}
.clip h3{font-size:clamp(22px,2.3vw,30px); margin:0 0 14px; text-wrap:pretty}
.clip-tx p{margin:0 0 22px; font-size:16.5px; color:var(--ink-2); max-width:58ch}
.clip-link{
  display:inline-flex; align-items:center; gap:8px; padding-bottom:3px;
  font:400 12.5px/1 Jost,sans-serif; letter-spacing:var(--ls-meta); text-transform:uppercase;
  text-decoration:none; color:var(--ink); border-bottom:1px solid var(--ink);
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.clip-link svg{flex:none; transition:transform .45s var(--ease)}
.clip-link:hover{color:var(--blue-dp); border-color:var(--blue-dp)}
.clip-link:hover svg{transform:translate(2px,-2px)}
/* Zeitungsausschnitt: nur der obere Teil (Titel + Foto) sichtbar, wie eine
   ausgerissene Seite; der volle Text steht im verlinkten Artikel. */
.clip-img{margin:26px 0 0; max-width:280px}
.clip-img img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top;
  border:1px solid var(--rule); box-shadow:0 1px 0 var(--rule-2), 0 14px 28px -18px rgba(25,23,19,.35);
}
.clip-img figcaption{
  margin-top:12px; font:400 11.5px/1.4 Jost,sans-serif;
  letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--ink-3);
}
.sr{position:absolute; left:-9999px}

/* ---------- Contact ---------- */
.contact{background:var(--ink); color:var(--paper); padding:var(--sect) 0; text-align:center}
.contact h2{font-size:clamp(34px,4.2vw,58px); margin:0 0 18px}
.contact p{margin:0 auto 38px; max-width:48ch; color:rgba(252,251,248,.72)}
.contact p{color:color-mix(in srgb, var(--paper) 72%, transparent)}
.contact .acts{justify-content:center}
.contact .btn{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.contact .btn:hover{background:var(--blue); border-color:var(--blue); color:var(--ink)}
/* E-Mail-Adresse nicht versal sperren: laeuft sonst auf Phones ueber
   und wirkt billig - Kleinschreibung, engere Sperrung */
.contact .btn[href^="mailto"]{text-transform:lowercase; letter-spacing:.03em; font-size:14px}
.contact .btn.line{background:transparent; color:var(--paper); border-color:rgba(252,251,248,.36)}
.contact .btn.line{border-color:color-mix(in srgb, var(--paper) 36%, transparent)}
.contact .btn.line:hover{background:transparent; border-color:var(--paper); color:var(--paper)}
.contact .btn[href^="tel"]{font-variant-numeric:tabular-nums}
.contact :focus-visible{outline-color:var(--blue)} /* blue-dp waere auf --ink unsichtbar */

/* Social: Icon + Wort, Farbe erbt vom Kontext (hell/dunkel) */
.social{
  display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
}
.social a{
  display:inline-flex; align-items:center; gap:9px;
  padding-block:6px; /* Tap-Target */
  font:400 12px/1 Jost,sans-serif; letter-spacing:var(--ls-meta); text-transform:uppercase;
  text-decoration:none; transition:color .25s var(--ease), opacity .25s var(--ease);
}
.social svg{flex:none; display:block}

/* dunkler Kontaktbereich */
.contact .social{margin-top:30px}
.social-dark a{color:color-mix(in srgb, var(--paper) 72%, transparent)}
.social-dark a:hover{color:var(--blue)}

/* heller Footer */
.social-ft a{color:var(--ink-2)}
.social-ft a:hover{color:var(--ink)}

/* ---------- Footer ---------- */
.ft{padding:62px 0}
.ft-in{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center}
.ft p{margin:0}
.ft-name{font-size:15px; color:var(--ink-2)}
.ft-contact{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; font-size:15px; font-variant-numeric:tabular-nums}
.ft-contact a{
  color:var(--ink-2); padding-block:6px; /* Tap-Target */
  text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:4px;
}
.ft-contact a:hover{color:var(--ink); text-decoration-color:var(--ink)}
.ft-contact span{color:var(--ink-3)}
.ft-claim{
  margin-top:6px !important; font:400 12px/1.6 Jost,sans-serif;
  letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--ink-3);
}
.legal{margin-top:10px !important; font-size:13.5px; color:var(--ink-3); max-width:54ch}

/* Rechtstexte im Footer - auch von mentions-legales.html und
   politique-de-confidentialite.html genutzt. */
.ft-legal-nav{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:14px !important;
  font:400 12px/1.6 Jost,sans-serif; letter-spacing:.06em; text-transform:uppercase;
}
.ft-legal-nav a{
  color:var(--ink-3); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.ft-legal-nav a:hover{color:var(--ink); border-color:var(--ink)}
.ft-legal-nav a[aria-current="page"]{color:var(--ink-2); border-color:transparent}
.ft-legal-nav span{color:var(--rule)}

/* ---------- Motion ---------- */
/* Reveals werden von anim.js (GSAP + ScrollTrigger) gesteuert.
   Ohne JS bleibt alles sichtbar - kein Startzustand im CSS. */
/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .cover{grid-template-columns:1fr; gap:40px; padding-top:48px}
  .cover h1{font-size:clamp(30px,8.6vw,56px)} /* einspaltig: laengste Zeile passt bis 360px */
  .cover-img{order:-1}
  .cover-img img{aspect-ratio:16/10}
  .cols{grid-template-columns:1fr; gap:34px}
  .cols article{padding:0 0 0 22px; border-left:1px solid var(--rule-2)}
  .cols article:first-child{padding-left:22px; border-left:1px solid var(--rule-2)}
  .band{grid-template-columns:1fr}
  .band-img{min-height:320px; aspect-ratio:16/10}
  .band-tx{padding:52px 30px}
  .marque-in{grid-template-columns:1fr; gap:30px}
  .marque blockquote{padding-left:0; border-left:0; border-top:1px solid var(--rule); padding-top:28px}
  .marque p{font-size:clamp(22px,6.2vw,36px)}
  .julie-in{grid-template-columns:1fr; gap:34px}
  .julie-img img{aspect-ratio:4/3}
  .strip{grid-template-columns:1fr}
  .strip.flip figure{order:0}
  .strip figure img{min-height:260px; aspect-ratio:16/10}
  .strip > div{padding:38px 30px}
  /* Preis neben dem Namen, Beschreibung darunter ueber die ganze Breite */
  .row{grid-template-columns:1fr auto; grid-template-areas:"name price" "desc desc"; gap:10px 24px; padding:26px 20px}
  .r-name{grid-area:name}
  .r-desc{grid-area:desc}
  .r-price{grid-area:price; font-size:26px}
  .clip{grid-template-columns:1fr; gap:10px; padding:26px 20px}
  /* Phone/Tablet: Ausschnitt ans Ende der Zeile, nach Titel und Link */
  .clip-src{display:contents}
  .clip-paper{margin:0}
  .clip-meta{margin-bottom:12px}
  .clip-img{order:1; max-width:220px; margin-top:12px}
  /* Tablet: Destinations und Forfaits bleiben neben der Telefonnummer stehen,
     die beiden ersten Punkte fallen weg */
  .masthead nav a[href="#metier"], .masthead nav a[href="#julie"], .masthead nav a[href="#presse"]{display:none}
  .masthead nav{justify-self:end}
  .mast-in{gap:18px; height:66px}
  .mast-tel{justify-self:end}
}
@media (max-width:640px){
  :root{--sect:72px}
  .masthead nav{display:none} /* auf Phones reicht der Platz neben der Telefonnummer nicht */
  .mast-in{grid-template-columns:auto 1fr} /* sonst laesst die leere dritte Spalte ihren gap stehen */
  .mast-tel{font-size:12px; letter-spacing:.1em}
  .brand-type b{font-size:12px; letter-spacing:.16em}
  .brand-type i{font-size:10px}
  .acts{flex-direction:column} /* Buttons vollbreit; enger gesperrt passt der lange Primaerbutton bis 390px auf eine Zeile */
  .btn{padding:15px 18px; font-size:12.5px; letter-spacing:.1em; line-height:1.5}
  .table,.clips{margin-inline:-14px}
  .row,.clip{padding-inline:14px}
  .cover{padding-inline:22px}
  .wrap,.julie-in{padding-inline:22px}
  .metier,.mondes,.forfaits,.presse,.julie{padding-bottom:var(--sect)}
  .dc{font-size:52px}
  .ledger li{grid-template-columns:1fr; gap:4px}
  .ft-contact{flex-direction:column; gap:2px}
  .ft-contact span{display:none}
}
@media (max-width:370px){
  /* neben der Marke bleibt kein Platz fuer die Nummer: Hoerer-Icon, 44px Tap-Target */
  .mast-tel svg{display:block}
  .mast-tel span{display:none}
  .mast-tel{padding:12px}
}

/* ---------- Logo-Elemente: Ring-Badge, Signatur, Schwung-Divider ---------- */
.badge{
  position:absolute; right:-58px; bottom:34px; z-index:2;
  width:132px; height:132px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--rule); border-radius:50%;
  transition:transform .5s var(--ease);
}
.badge:hover{transform:scale(1.04)}
.badge img{grid-area:1/1; aspect-ratio:auto; object-fit:fill}
.badge .badge-ring{width:112px; height:112px; animation:badge-spin 36s linear infinite}
.badge .badge-mark{width:24px; height:auto}
@keyframes badge-spin{to{transform:rotate(1turn)}}

.julie-sign{margin:10px 0 0}
.julie-sign img{width:180px; height:auto}

.divider{max-width:1400px; margin-inline:auto; padding-inline:30px; margin-bottom:44px}
.divider svg{display:block; width:100%; height:clamp(34px,5.5vw,80px)}
/* der mittlere Schwung gespiegelt, damit sich das Motiv nicht dreimal identisch wiederholt */
.julie + .divider svg{transform:scaleX(-1)}

@media (max-width:1000px){
  .badge{right:14px; bottom:14px; width:104px; height:104px}
  .badge .badge-ring{width:88px; height:88px}
  .badge .badge-mark{width:19px}
}
@media (prefers-reduced-motion:reduce){
  .badge-ring{animation:none}
}