@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/bricolage-grotesque.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* =========================================================
   Fotogalerie Mallorcaparty Mainz
   Die Schriften werden vom Skript davorgesetzt (fonts.css).
   ========================================================= */

:root{
  --grund:#0d0d0e;
  --flaeche:#17171a;
  --linie:rgba(255,255,255,.09);
  --text:#f3f0ea;
  --leise:#9b978f;
  --akzent:#fc7411;
  --akzent-dunkel:#e3630a;

  --reihe:280px;        /* Zielhöhe einer Bildreihe */
  --luecke:4px;
  --kopf-h:77px;        /* Höhe der Kopfzeile, für die klebende Kapitelleiste */
  --nav-h:52px;
  --rand:clamp(16px,3vw,44px);
  --breite:1720px;

  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --schrift:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + var(--nav-h) + 16px);scroll-behavior:smooth}
body{
  background:var(--grund);color:var(--text);
  font:400 16px/1.55 var(--schrift);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.nur-lesbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:30;background:rgba(13,13,14,.94);border-bottom:1px solid var(--linie)}
.kopf-in{max-width:var(--breite);margin:0 auto;padding:10px var(--rand);display:flex;align-items:center;gap:32px}
.kopf .logo{flex:none}
.kopf .logo img{height:56px;width:auto}
.kopf nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px;font-weight:500}
.kopf nav a:not(.knopf){text-decoration:none;color:var(--leise);transition:color .15s}
.kopf nav a:not(.knopf):hover,.kopf nav a[aria-current]{color:var(--text)}

.knopf{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--akzent);color:#fff;text-decoration:none;
  font:600 14px/1 var(--schrift);letter-spacing:.005em;
  padding:13px 20px;border-radius:3px;border:1px solid var(--akzent);
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.knopf svg{width:16px;height:16px;flex:none}
.knopf.klein{padding:10px 16px}
.knopf.linie{background:transparent;border-color:rgba(255,255,255,.26);color:var(--text)}
.knopf.linie:hover{border-color:var(--text)}
@media (max-width:760px){
  :root{--kopf-h:57px;--nav-h:48px}
  .kopf-in{gap:16px;padding-top:8px;padding-bottom:8px}
  .kopf .logo img{height:40px}
  .kopf nav a:not(.knopf){display:none}
}

/* ---------- Titelbereich ---------- */
.titel{
  max-width:var(--breite);margin:0 auto;
  padding:clamp(44px,7vw,104px) var(--rand) clamp(28px,4vw,52px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:20px 72px;align-items:end;
}
.ueberzeile{grid-column:1/-1;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--leise)}
.ueberzeile a{text-decoration:none}
.ueberzeile a:hover{color:var(--text)}
.titel h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(42px,7.4vw,112px);line-height:.93;letter-spacing:-.028em;
  text-wrap:balance;
}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:20px;font-size:15px;color:var(--leise)}
.meta > *:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;margin:0 14px;vertical-align:middle}
.meta strong{color:var(--text);font-weight:600}
.hinweis{max-width:32ch;font-size:15px;color:var(--leise);justify-self:end;padding-bottom:6px}
@media (max-width:900px){
  .titel{grid-template-columns:minmax(0,1fr)}
  .hinweis{justify-self:start;max-width:46ch}
}
@media (max-width:600px){
  .titel .meta time{flex-basis:100%}
  .titel .meta time::after{display:none}
}

/* ---------- Bildraster (Blocksatz-Reihen, ohne JavaScript) ---------- */
.galerie{
  max-width:var(--breite);margin:0 auto;padding:0 clamp(6px,1.4vw,24px);
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--luecke);
}
.galerie::after{content:"";flex:1e9 1 0}
.g-bild{
  flex:var(--r) 1 calc(var(--r) * var(--reihe));
  aspect-ratio:var(--r);
  position:relative;overflow:hidden;background:var(--flaeche);
}
.g-bild img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
@media (hover:hover){
  .galerie:hover .g-bild img{opacity:.72}
  .galerie .g-bild:hover img{opacity:1}
}
/* Zielhöhe je Bildschirmbreite: so viele Fotos pro Reihe, dass nichts
   verloren wirkt – am Handy zwei Querformate oder drei Hochformate */
@media (max-width:1200px){:root{--reihe:230px}}
@media (max-width:900px){:root{--reihe:170px}}
@media (max-width:600px){:root{--reihe:108px;--luecke:3px}}

/* ---------- Kapitel ---------- */
.kapitel-nav{position:sticky;top:var(--kopf-h);z-index:20;background:rgba(13,13,14,.96);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kapitel-nav-in{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);height:var(--nav-h);
  display:flex;align-items:stretch;gap:30px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.kapitel-nav-in::-webkit-scrollbar{display:none}
.kapitel-nav a{
  display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--leise);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.kapitel-nav a span{font-size:12px;opacity:.55;font-variant-numeric:tabular-nums}
.kapitel-nav a:hover{color:var(--text)}
.kapitel-nav a[aria-current="true"]{color:var(--text);border-bottom-color:var(--text)}
@media (max-width:760px){
  .kapitel-nav-in{gap:24px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
}

.kapitel{padding-top:clamp(36px,4.6vw,68px)}
.kapitel-kopf{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) 18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.kapitel-kopf h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.8vw,40px);line-height:1;letter-spacing:-.02em}
.kapitel-kopf span{font-size:14px;color:var(--leise)}

/* ---------- Abschluss ---------- */
.abschluss{
  max-width:var(--breite);margin:clamp(72px,10vw,140px) auto 0;
  padding:clamp(44px,6vw,80px) var(--rand) 0;border-top:1px solid var(--linie);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 72px;align-items:end;
}
.abschluss h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5.2vw,72px);line-height:.96;letter-spacing:-.024em;text-wrap:balance;
}
.abschluss p{margin-top:18px;max-width:46ch;font-size:17px;color:var(--leise)}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;justify-self:end}
@media (max-width:900px){
  .abschluss{grid-template-columns:minmax(0,1fr)}
  .aktionen{justify-self:start}
}

/* ---------- Übersichtsseite ---------- */
.aufmacher{
  display:block;position:relative;text-decoration:none;
  max-width:var(--breite);margin:0 auto;padding:0 clamp(6px,1.4vw,24px);
}
.aufmacher-bild{position:relative;overflow:hidden;background:var(--flaeche);aspect-ratio:21/9}
.aufmacher-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.aufmacher-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,14,0) 42%,rgba(13,13,14,.82) 100%)}
.aufmacher-text{position:absolute;left:clamp(26px,4vw,64px);right:clamp(26px,4vw,64px);bottom:clamp(24px,4vw,56px);z-index:2}
.aufmacher-text .ueberzeile{margin-bottom:12px;color:rgba(243,240,234,.78)}
.aufmacher-text h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.6vw,68px);line-height:.95;letter-spacing:-.024em;max-width:18ch}
.aufmacher-text .meta{margin-top:14px;color:rgba(243,240,234,.78)}
@media (hover:hover){.aufmacher:hover .aufmacher-bild img{transform:scale(1.02)}}
@media (max-width:760px){.aufmacher-bild{aspect-ratio:4/5}}

.weitere{
  max-width:var(--breite);margin:clamp(56px,7vw,96px) auto 0;padding:0 var(--rand);
}
.weitere h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin-bottom:24px}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:44px 22px}
.karte{text-decoration:none;display:block}
.karte-bild{aspect-ratio:3/2;overflow:hidden;background:var(--flaeche)}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.karte h3{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.012em;margin-top:16px}
.karte .meta{margin-top:6px;font-size:14px}
@media (hover:hover){.karte:hover .karte-bild img{opacity:.82}}

/* ---------- Fußzeile ---------- */
.fuss{
  max-width:var(--breite);margin:clamp(64px,8vw,112px) auto 0;
  padding:26px var(--rand) 40px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;
  font-size:13px;color:var(--leise);
}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--text)}

/* ---------- Kurzmeldung ---------- */
.meldung{
  position:fixed;left:50%;bottom:30px;z-index:100100;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--text);color:#111;font:600 14px/1 var(--schrift);
  padding:14px 20px;border-radius:3px;transition:opacity .2s,transform .2s;
}
.meldung.an{opacity:1;transform:translate(-50%,0)}

/* ---------- Großansicht (PhotoSwipe) ---------- */
.pswp{--pswp-bg:#0a0a0b;--pswp-icon-color:#f3f0ea;--pswp-icon-color-secondary:#0a0a0b;--pswp-icon-stroke-color:#0a0a0b}
.pswp__counter{font:500 13px/1 var(--schrift);letter-spacing:.04em;opacity:.75;margin-top:22px}

/* Beschriftete Knöpfe unten in der Großansicht – mit dem Daumen erreichbar */
.pswp__aktionen{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:center;gap:10px;
  padding:16px var(--rand) calc(18px + env(safe-area-inset-bottom));
  pointer-events:none;transition:opacity .25s ease;
}
.pswp__aktionen > *{pointer-events:auto}
.pswp:not(.pswp--ui-visible) .pswp__aktionen{opacity:0}
.pswp:not(.pswp--ui-visible) .pswp__aktionen > *{pointer-events:none}
.pswp__aktion{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:178px;
  font:600 15px/1 var(--schrift);color:#fff;text-decoration:none;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:3px;
  padding:15px 22px;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s;
}
.pswp__aktion:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.4)}
.pswp__aktion.haupt{background:var(--akzent);border-color:var(--akzent)}
.pswp__aktion.haupt:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.pswp__aktion svg{width:18px;height:18px;flex:none}
@media (max-width:600px){
  .pswp__aktionen{gap:8px;padding-left:12px;padding-right:12px}
  .pswp__aktion{flex:1;min-width:0;padding:15px 10px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}