/* Portu Bar – Entwurf Seetalwebsites */

:root {
  --bg: #F4ECDF;
  --bg-2: #EADFCD;
  --ink: 30, 21, 18;               /* #1E1512 */
  --t1: rgba(var(--ink), .92);
  --t2: rgba(var(--ink), .68);
  --t3: rgba(var(--ink), .48);
  --linie: rgba(var(--ink), .14);
  --creme: 246, 237, 224;          /* #F6EDE0 */
  --c1: rgba(var(--creme), .94);
  --c2: rgba(var(--creme), .72);
  --c3: rgba(var(--creme), .5);
  --rot: #B8301F;
  --rot-dunkel: #9C2717;
  --gruen: #134A35;
  --senf: #D9A23A;
  --dunkel: #1E1512;

  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --sans: "Onest", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;

  --rand: 20px;
  --abschnitt: 80px;
  --radius: 6px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 900px) {
  :root { --rand: 40px; --abschnitt: 140px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 18px; } }

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, dt { margin: 0; padding: 0; }
::selection { background: var(--dunkel); color: rgb(var(--creme)); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }
.mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.platzhalter { font-style: italic; }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--rot); color: rgb(var(--creme));
  font: 500 17px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.btn:hover { background: var(--rot-dunkel); }
.btn:active { transform: scale(.97); }
.btn--dunkel { background: var(--dunkel); }
.btn--dunkel:hover { background: #3A2A24; }

.textlink {
  display: inline-block; padding: 8px 0 2px;
  color: var(--c2); text-decoration: none; font-size: 16px;
  border-bottom: 1px solid var(--c3);
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.textlink:hover { color: var(--c1); border-color: var(--c1); }

/* Kopfzeile */
.top { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--c1); }
.top__in { display: flex; align-items: center; gap: 24px; height: 64px; }
.top__name {
  font: 500 15px/1 var(--display); letter-spacing: -0.02em;
  text-decoration: none; margin-right: auto; padding: 12px 0;
}
.top__ort { color: var(--c2); }
.top__nav { display: none; gap: 24px; }
.top__nav a {
  padding: 8px 0; font-size: 15px; color: var(--c2); text-decoration: none;
  transition: color 150ms ease-out;
}
.top__nav a:hover { color: var(--c1); }
@media (min-width: 900px) { .top__nav { display: flex; } .top__in { height: 88px; } }

/* ── Einstieg ─────────────────────────────── */
.hero { position: relative; background: var(--rot); color: var(--c1); overflow: hidden; }
.hero__in {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: 64px;
}

/* Infoblock wie eine Visitenkarte (Vorbild Piranha Bar) */
.karte {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--c3); border-bottom: 1px solid var(--c3);
}
.karte dt { color: var(--c3); margin-bottom: 8px; }
.karte dd { color: var(--c1); line-height: 1.45; }
.karte dd.platzhalter { color: var(--c2); }

.hero__text { margin-top: 40px; }
.hero__satz {
  font: 400 26px/1.15 var(--display); letter-spacing: -0.03em;
  color: var(--c1);
}
.hero__vertrauen { margin-top: 16px; color: var(--c2); }
.hero__vertrauen span { color: var(--senf); }
.hero__cta { margin-top: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.hero__mark {
  margin-top: auto;
  font: 500 27.5vw/0.86 var(--display);
  letter-spacing: -0.055em;
  color: var(--dunkel);
  margin-left: -0.04em;
  padding: 24px 0 16px;
}

.siegel {
  position: absolute; z-index: 2;
  right: var(--rand); bottom: calc(16px + 4vw);
  width: 96px; height: 96px;
}
.siegel svg { width: 100%; height: 100%; overflow: visible; }
.siegel text {
  font: 500 19px/1 var(--mono); letter-spacing: .06em;
  fill: rgb(var(--creme));
}
.siegel__stern { fill: var(--senf); }
.siegel svg text { transform-origin: 100px 100px; animation: drehen 22s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

@media (min-width: 900px) {
  .hero__in { padding-top: 104px; }
  .karte { grid-template-columns: repeat(2, minmax(0, 240px)); gap: 40px; padding: 24px 0; width: fit-content; min-width: 520px; }
  .hero__text { max-width: 520px; margin-top: 40px; }
  .hero__satz { font-size: 32px; }
  .hero__mark {
    font-size: min(calc((100vw - 80px) / 5.4), 208px, 30vh);
    white-space: nowrap;
    padding-bottom: 24px;
  }
  .hero__mark .line { display: inline-block; }
  .siegel { width: 200px; height: 200px; bottom: auto; top: 128px; right: var(--rand); }
}

/* ── Aussage mit Bildern im Text ─────────── */
.section { padding: var(--abschnitt) 0; }

.aussage__text {
  font: 400 30px/1.22 var(--display);
  letter-spacing: -0.035em;
  max-width: 20ch;
}
@media (min-width: 900px) {
  .aussage__text { font-size: clamp(48px, 4.8vw, 72px); max-width: 18ch; }
}
.nb { white-space: nowrap; }
.wort { transition: opacity 300ms ease-out; }
.js .aussage__text .wort { opacity: .16; }
.js .aussage__text .wort.an { opacity: 1; }

.kapsel {
  display: inline-block; vertical-align: -0.1em;
  width: 1.7em; height: 0.82em; margin: 0 0.06em;
  border-radius: 999px; overflow: hidden; background: var(--bg-2);
}
.kapsel img { width: 100%; height: 100%; object-fit: cover; }
.js .kapsel { clip-path: inset(0 50% 0 50% round 999px); transition: clip-path 900ms var(--expo); }
.js .kapsel img { transform: scale(1.3); transition: transform 1200ms var(--expo); }
.js .kapsel.an { clip-path: inset(0 0 0 0 round 999px); }
.js .kapsel.an img { transform: scale(1); }

.aussage__fuss {
  display: grid; gap: 24px; margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--linie);
  color: var(--t2);
}
.aussage__fuss p { max-width: 42ch; }
.aussage__label { display: block; font-weight: 500; color: var(--t1); margin-bottom: 8px; }
@media (min-width: 900px) {
  .aussage__fuss { grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 104px; }
}

/* ── Anlässe: Farbflächen übereinander ───── */
.anlaesse__kopf { display: grid; gap: 16px; padding-bottom: 40px; }
@media (min-width: 900px) {
  .anlaesse__kopf { grid-template-columns: 1fr 1fr; align-items: end; padding-bottom: 64px; }
}
.h2 { font: 400 44px/1 var(--display); letter-spacing: -0.045em; }
@media (min-width: 900px) { .h2 { font-size: 88px; } }
.kopf__text { color: var(--t2); max-width: 40ch; }

.panel {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  transform-origin: 50% 0;
}
.panel--ink   { background: var(--dunkel); color: var(--c1); }
.panel--gruen { background: var(--gruen); color: var(--c1); }
.panel--rot   { background: var(--rot); color: var(--c1); }
.panel--senf  { background: var(--senf); color: var(--dunkel); }

.panel__in {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding-top: 40px; padding-bottom: 40px;
}
.panel__meta {
  display: flex; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid currentColor;
  opacity: .8;
}
.panel__name {
  position: relative; z-index: 1;
  margin-top: 24px;
  font: 500 16.5vw/0.9 var(--display); letter-spacing: -0.055em;
}
.panel__text { position: relative; z-index: 3; margin-top: auto; max-width: 30ch; opacity: .82; }
.plakat {
  position: absolute; z-index: 2;
  left: 50%; bottom: 128px; width: 66vw; max-width: 300px;
  transform: translateX(-50%);
}
.plakat img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 2px;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .3));
  will-change: transform;
}
@media (min-width: 900px) {
  .panel__in { padding-top: 64px; padding-bottom: 64px; }
  .panel__name { font-size: min(9vw, 18vh); margin-top: 40px; }
  .panel__text { font-size: 20px; }
  .plakat {
    left: auto; right: calc(var(--rand) + 4vw); bottom: auto; top: 50%;
    width: min(30vw, 46vh, 380px); max-width: none; transform: translateY(-40%);
  }
}

/* ── Besuch ──────────────────────────────── */
.besuch { position: relative; z-index: 5; background: var(--bg); }
.kopf { display: grid; gap: 16px; margin-bottom: 40px; }
@media (min-width: 900px) {
  .kopf { grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 64px; }
}
.besuch__reihe { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .besuch__reihe { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}

.zeiten { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 15px; }
.zeiten th, .zeiten td { padding: 16px 0; border-top: 1px solid var(--linie); text-align: left; font-weight: 400; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 1px solid var(--linie); }
.zeiten td { text-align: right; color: var(--t3); font-style: italic; }
.zeiten tr.heute th { color: var(--rot); font-weight: 500; }
.zeiten tr.heute th::after {
  content: "heute"; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; background: var(--rot); color: rgb(var(--creme));
  font-size: 12px; vertical-align: 1px;
}
.zeiten__hinweis { margin-top: 16px; color: var(--t3); font-size: 15px; }

.adresse { display: grid; gap: 24px; justify-items: start; }
.adresse p { font: 400 28px/1.2 var(--display); letter-spacing: -0.035em; }
@media (min-width: 900px) { .adresse p { font-size: 44px; } }


/* Fusszeile */
.fuss { position: relative; z-index: 5; background: var(--dunkel); color: var(--c1); padding: 64px 0 40px; }
@media (min-width: 900px) { .fuss { padding: 104px 0 40px; } }
.fuss__mark {
  font: 500 15.5vw/0.86 var(--display); letter-spacing: -0.055em;
  color: var(--rot); margin-left: -0.04em; white-space: nowrap;
}
@media (min-width: 1300px) { .fuss__mark { font-size: 196px; } }
.fuss__reihe {
  display: grid; gap: 24px; margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(var(--creme), .16);
  color: var(--c2);
}
@media (min-width: 900px) { .fuss__reihe { grid-template-columns: 1fr 1fr; } }
.fuss a { display: inline-block; padding: 8px 0; text-decoration: none; transition: color 150ms ease-out; }
.fuss a:hover { color: var(--c1); }
.fuss__klein { margin-top: 64px; font-size: 14px; color: var(--c3); }

/* ── Bewegung ────────────────────────────── */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__mark .line { padding-top: .04em; }
.line > span { display: inline-block; }

.js .line > span { transform: translateY(105%); }
.js .fade { opacity: 0; transform: translateY(16px); }
.js .is-in .line > span,
.js .is-in .fade {
  transform: none; opacity: 1;
  transition: transform 1100ms var(--expo), opacity 800ms var(--expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .line > span, .js .fade,
  .js .aussage__text .wort, .js .kapsel, .js .kapsel img {
    transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important;
  }
  .siegel svg text { animation: none; }
  .hero__mark, .panel, .plakat img { transform: none !important; filter: none; }
}