@import url("colors_and_type.css");

/* ===============================================================
   Mare Incognita — Website kit layout CSS
   The Figma comp targets a 1728 px viewport with a 30 px outer
   margin. This kit follows the same layout, scaled responsively
   via a content-max-width on each section.
   =============================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }

/* ---------- App shell ---------- */
.mi-app {
  min-height: 100vh;
  padding: 30px;
  position: relative;
  max-width: 1728px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Header ---------- */
.mi-header {
  position: absolute; top: 30px; left: 30px; right: 30px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 38px;
  z-index: 10;
  transition: background 0.25s ease, padding 0.25s ease;
}
.mi-header__logo { height: 54px; display: block; transition: height 0.25s ease; }
.mi-header__right { display:flex; align-items:center; gap: 14px; }

.mi-header.is-scrolled {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  padding: 14px 38px;
  border-radius: 0;
  z-index: 100;
}
.mi-header.is-scrolled .mi-header__logo { height: 40px; }

.mi-btn-buchen {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px 0 22px;
  background: var(--mi-tuerkis); color: #fff;
  font-family: var(--font-display); font-weight: 500;
  font-size: 15px; letter-spacing: 0.02em; line-height: 1;
  border: 0; border-radius: 5px; cursor: pointer;
  transition: background 120ms ease-out;
}
.mi-btn-buchen:hover { background: #009ba2; }
.mi-btn-buchen:active { transform: scale(.97); background: #008990; }
.mi-btn-buchen--petrol { background: var(--mi-petrol); }
.mi-btn-buchen--petrol:hover { background: #004966; }
.mi-btn-buchen svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mi-disc {
  width: 46px; height: 46px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--mi-petrol); color: #fff;
  border: 0; cursor: pointer;
  transition: background 120ms ease-out;
}
.mi-disc:hover { background: #004966; }
.mi-disc--outline { background: transparent; border: 2px solid #fff; }
.mi-disc--outline:hover { background: rgba(255,255,255,0.1); }
.mi-disc--sm { width: 40px; height: 40px; }
.mi-disc--tuerkis { background: var(--mi-tuerkis); }
.mi-disc--tuerkis:hover { background: #009ba2; }
.mi-disc svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero ---------- */
.mi-hero {
  position: relative;
  height: 720px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.mi-hero__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.mi-hero__scrim {
  position: absolute; left: 0; right: 0; top: 0; height: 394px;
  background: linear-gradient(rgb(0,88,121) 0%, rgba(255,255,255,0) 100%);
  mix-blend-mode: multiply;
}
.mi-hero__title {
  position: absolute;
  left: 142px; right: 142px; bottom: -100px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 70px; line-height: 80px;
  color: var(--mi-petrol); letter-spacing: -0.005em;
  z-index: 5;
  max-width: 900px;
}
.mi-hero__bread {
  position: absolute; left: 142px; bottom: 0;
  font-family: var(--font-body); font-size: 15px; line-height: 27px; color: var(--mi-ink-40);
}
.mi-hero__bread a { color: inherit; text-decoration: none; }
.mi-hero__bread a:hover,
.mi-hero__bread a:focus-visible { color: var(--mi-tuerkis); text-decoration: underline; }

/* ---------- Page chrome ---------- */
.mi-page {
  padding: 220px 142px 20px;
}
.mi-page--detail { padding-top: 240px; }

/* ---------- Section module: duet ---------- */
.mi-duet {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--mi-grey-95);
  border-radius: 10px; overflow: hidden;
  min-height: 522px;
  margin: 48px 0;
}
.mi-duet__photo {
  background-size: cover; background-position: center;
  min-height: 360px;
}
.mi-duet__text {
  padding: 80px 70px;
  display: flex; flex-direction: column; gap: 24px; justify-content: center;
}
.mi-duet__text h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 42px; line-height: 48px; color: var(--mi-petrol);
  letter-spacing: -0.005em; margin: 0;
}
.mi-duet__text p {
  font-family: var(--font-body); font-size: 20px; line-height: 30px;
  color: var(--fg); margin: 0; max-width: 540px;
}
.mi-duet__link {
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
  color: var(--mi-tuerkis); letter-spacing: 0.02em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.mi-duet__link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Section header ---------- */
.mi-section-eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mi-tuerkis);
  margin: 0 0 14px;
}
.mi-section-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 50px; line-height: 60px;
  color: var(--mi-petrol); letter-spacing: -0.005em;
  margin: 0 0 24px; max-width: 900px;
}
.mi-section-intro {
  font-family: var(--font-body); font-size: 22px; line-height: 32px;
  color: var(--fg); max-width: 820px; margin: 0 0 56px;
}

/* ---------- Etappe rows ---------- */
.mi-leg-list { margin: 32px 0; }
.mi-leg-row {
  display: grid;
  grid-template-columns: 200px 1fr auto auto;
  gap: 36px; align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 120ms;
}
.mi-leg-row:hover { background: rgba(0,182,190,0.04); }
.mi-leg-row__thumb {
  width: 200px; height: 120px; border-radius: 8px;
  background-size: cover; background-position: center;
}
.mi-leg-row__title {
  font-family: var(--font-display); font-weight: 500; font-size: 27px; line-height: 32px;
  color: var(--fg); margin: 0 0 6px;
}
.mi-leg-row__meta {
  font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--fg-soft);
}
.mi-leg-row__meta b { color: var(--fg); font-weight: 700; }
.mi-leg-row__date {
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
  color: var(--mi-petrol);
}
.mi-leg-row__cta {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  color: var(--mi-tuerkis); letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 8px;
}
.mi-leg-row__cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Contact band ---------- */
.mi-contact-band {
  display: grid; grid-template-columns: 1.6fr 1fr;
  border-radius: 10px; overflow: hidden;
  background: var(--mi-petrol);
  margin: 48px 0;
  min-height: 478px;
}
.mi-contact-band__text { padding: 80px 80px; display:flex; flex-direction:column; gap: 32px; justify-content: center;}
.mi-contact-band__title {
  font-family: var(--font-body); font-weight: 500;
  font-size: 42px; line-height: 48px; color: #fff; margin: 0;
  letter-spacing: -0.005em;
}
.mi-contact-band__accent {
  font-family: var(--font-body); font-weight: 500;
  font-size: 42px; line-height: 56px; color: var(--mi-tuerkis); margin: 0;
  letter-spacing: -0.005em;
}
.mi-contact-band__photo { background-size: cover; background-position: center; }

/* ---------- Newsletter ---------- */
/* Ein Markup, zwei Huellen: die schmale Spalte im Fussbereich und das breite
   Band, das die Redaktion als Block auf eine Seite stellt. Beide stehen auf
   Petrol, deshalb teilen sie Feld, Knopf und Meldung. */
/* Wrapper und Formular sind gleich aufgebaut, damit die Bestaetigung genau dort
   sitzt, wo vorher die erste Zeile stand: Abstaende kommen aus `gap`, nicht aus
   Aussenabstaenden, die je nach Verschachtelung anders zusammenfallen. */
.mi-newsletter,
.mi-newsletter__form { display:flex; flex-direction: column; gap:6px; }
.mi-newsletter--footer { margin-top: 14px; }
.mi-newsletter__row { display:flex; gap:6px; }
.mi-newsletter input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px;
  border: 0; border-radius: 5px; background: #fff;
  font-family: var(--font-body); font-size: 15px;
  color: var(--fg);
}
.mi-newsletter input:disabled { background: rgba(255,255,255,0.55); }
.mi-newsletter button {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mi-tuerkis); border: 0; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}
.mi-newsletter button svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mi-newsletter__note {
  margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 20px;
  color: rgba(255,255,255,0.8);
}
/* Weiss statt Tuerkis: auf Petrol traegt das Tuerkis nur knapp 3:1 Kontrast —
   ausgerechnet die Bestaetigung waere der schlechtest lesbare Text im Kasten. */
.mi-newsletter__note--done { color: #fff; font-weight: 500; }

/* Im Band ist Platz: die Felder stehen nebeneinander, die Meldungen darueber. */
.mi-newsletter--band .mi-newsletter__form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.mi-newsletter--band .mi-newsletter__row { flex: 1 1 220px; }
.mi-newsletter--band .mi-newsletter__note { flex: 1 1 100%; margin: 0; font-size: 16px; line-height: 24px; }
.mi-newsletter--band input { height: 48px; font-size: 16px; }
.mi-newsletter--band button { width: 48px; height: 48px; }

.mi-newsletter-band {
  border-radius: 10px; background: var(--mi-petrol);
  margin: 48px 0; padding: 64px 80px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
}
.mi-newsletter-band__title {
  font-family: var(--font-body); font-weight: 500;
  font-size: 34px; line-height: 42px; color: #fff; margin: 0;
  letter-spacing: -0.005em;
}
.mi-newsletter-band__intro {
  font-family: var(--font-body); font-size: 18px; line-height: 28px;
  color: rgba(255,255,255,0.85); margin: 16px 0 0;
}

/* ---------- Stoerer badge ---------- */
.mi-stoerer {
  position: absolute;
  width: 158px; height: 158px; border-radius: 50%;
  background: var(--mi-rot);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  transform: rotate(-8deg);
  z-index: 8;
  box-shadow: 0 18px 48px -16px rgba(237,28,36,0.35);
}
.mi-stoerer span {
  font-family: var(--font-body); font-weight: 700;
  font-size: 19px; line-height: 22px; letter-spacing: 0.02em;
  text-transform: uppercase; color: #fff;
}
.mi-stoerer--petrol { background: var(--mi-petrol); box-shadow: 0 18px 48px -16px rgba(0,88,121,0.45); }

/* ---------- Side rail contact ---------- */
.mi-rail {
  position: absolute; right: 50px; top: 880px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.mi-rail__line { width: 2px; height: 80px; background: var(--mi-grey-85); }

/* ---------- Footer ---------- */
.mi-footer {
  position: relative;
  margin: 0 -30px -30px;
  padding: 60px 30px 60px;
  overflow: hidden;
  background: transparent;
}
.mi-footer__halfcircle {
  position: absolute;
  left: -2000px; bottom: -3000px;
  width: 5377px; height: 5377px;
  border-radius: 50%;
  background: var(--mi-tuerkis);
  z-index: -2;
}
.mi-footer__petrolcard {
  position: relative;
  margin: 0 auto;
  max-width: 1668px;
  background: var(--mi-petrol);
  border-radius: 10px;
  padding: 70px 100px;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 60px;
  z-index: 2;
}
.mi-footer__col h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mi-tuerkis); margin: 0 0 18px;
}
.mi-footer__col a, .mi-footer__col li {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 35px; color: #fff;
  text-decoration: none; display: block;
}
.mi-footer__col ul { padding: 0; margin: 0; list-style: none; }
.mi-footer__contact { color: var(--mi-tuerkis); font-family: var(--font-body); font-size: 18px; line-height: 28px; }
.mi-footer__contact b { display: block; color: var(--mi-tuerkis); font-weight: 700; }
.mi-footer__signet { width: 110px; height: 110px; margin-bottom: 18px; }
.mi-footer__bottom {
  display:flex; justify-content: space-between; align-items: center;
  max-width: 1668px; margin: 30px auto 0;
  padding: 24px 0;
  font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.7);
  position: relative; z-index: 2;
}
.mi-footer__socials { display:flex; gap: 10px; }
.mi-footer__socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid #fff; color: #fff;
}
.mi-footer__socials svg { width: 18px; height: 18px; }

/* ---------- Nav drawer ---------- */
.mi-nav-drawer {
  position: fixed; inset: 0;
  background: rgba(0,88,121,0.92);
  z-index: 100;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 180px 100px 60px;
  gap: 60px;
  align-content: start;
  animation: drawer 280ms cubic-bezier(.2,.7,.2,1);
}
@keyframes drawer {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mi-nav-drawer__mobile-top { display: none; }
.mi-nav-drawer__buchen { display: none; }
.mi-nav-drawer__chat-disc { display: none; }
.mi-nav-drawer__close { position: absolute; top: 70px; right: 80px; }
.mi-nav-drawer__logo { position: absolute; top: 80px; left: 100px; height: 54px; display: block; }
.mi-nav-drawer__logo img { height: 100%; width: auto; display: block; }
.mi-nav-drawer__col h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mi-tuerkis); margin: 0 0 24px;
}
/* Alle Menu-Eintraege einheitlich 32px — auch die Service-Spalte und der
   Abmelden-Button, damit keine Groessenstufen im Drawer entstehen. */
.mi-nav-drawer__col a {
  display: block; padding: 10px 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 32px; line-height: 1.2; color: #fff;
  text-decoration: none; cursor: pointer;
  letter-spacing: -0.005em;
}
.mi-nav-drawer__col a:hover { color: var(--mi-tuerkis); }

/* Service-Spalte: Icon + Text in Flexzeile */
.mi-nav-drawer__service-link {
  display: flex !important; align-items: center; gap: 14px;
  font-size: 32px !important; padding: 10px 0 !important;
}
.mi-nav-drawer__service-icon { width: 22px; height: 22px; flex-shrink: 0; }
.mi-nav-drawer__logout-btn {
  background: none; border: 0; padding: 10px 0; margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 32px; line-height: 1.2; letter-spacing: -0.005em;
  color: #fff; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px;
}

/* Archiv-Jahre: eine Zahlenreihe statt sechs voller Menuezeilen. Kleiner als
   die Hauptpunkte, weil sie Nachschlagewerk sind und nicht Angebot. */
.mi-nav-drawer__archive {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.mi-nav-drawer__archive-label {
  font-family: var(--font-body); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mi-tuerkis);
  width: 100%;
}
.mi-nav-drawer__archive a {
  font-size: 20px; padding: 6px 0;
  min-height: 44px; display: flex; align-items: center;
}

/* Konto-Block: Login bzw. die persoenlichen Eintraege samt Abmelden. Allein
   durch Weissraum vom uebrigen Service-Menu abgesetzt — eine Trennlinie sass
   in der schmalen Spalte sichtbar aus der Mitte. */
.mi-nav-drawer__account {
  margin-top: 34px;
}
.mi-nav-drawer__logout-btn:hover { color: var(--mi-tuerkis); }

/* Socials – rechts unten */
.mi-nav-drawer__socials { position: absolute; bottom: 60px; right: 100px; display: flex; gap: 12px; }
.mi-nav-drawer__socials a {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mi-nav-drawer__socials svg { width: 20px; height: 20px; }

/* Kontakt-Strip – links unten mit Icons */
.mi-nav-drawer__call {
  position: absolute; bottom: 60px; left: 100px;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-body); color: #fff;
}
.mi-nav-drawer__call a {
  color: #fff; font-size: 18px; text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.mi-nav-drawer__call a:hover { color: var(--mi-tuerkis); }
.mi-nav-drawer__call-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Etappe detail layout ---------- */
.mi-detail-grid {
  display: grid; grid-template-columns: 1fr 480px; gap: 80px;
  margin: 40px 0 60px;
}
.mi-fact-card {
  background: var(--mi-petrol); border-radius: 10px;
  padding: 40px 44px;
  color: #fff;
}
.mi-fact-card h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 32px;
  letter-spacing: -0.005em; margin: 0 0 24px; color: #fff;
}
.mi-fact-card .row {
  display: flex; justify-content: space-between; padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-body); font-size: 18px; line-height: 26px;
}
.mi-fact-card .row:last-child { border-bottom: 0; }
.mi-fact-card .row b { color: var(--mi-tuerkis); font-weight: 700; }
.mi-fact-card .price-cta { margin-top: 24px; width: 100%; justify-content: space-between; }
.mi-fact-card .stoerer-slot { position: relative; margin-top: -100px; margin-bottom: -50px; display:flex; justify-content:flex-end; padding-right: 0;}

/* ---------- Personen-Detail: Portrait + Steckbrief (Skipper / Vorstand) ----------
   Portrait und Karte stehen als ein Block still. Klebte nur das Bild, schob sich
   die Karte beim Scrollen dahinter und war auf flachen Fenstern nie zu sehen.
   Die Deckelung auf die Fensterhoehe laest das Bild schrumpfen statt die Karte
   aus dem Sichtfeld zu draengen. */
.mi-person-aside__inner {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 18px;
  max-height: calc(100vh - 120px);
}
.mi-person-aside__portrait {
  aspect-ratio: 4/5; min-height: 200px; flex: 0 1 auto;
  border-radius: 10px;
  background-size: cover; background-position: center top;
}
.mi-person-aside__card {
  background: var(--mi-petrol); color: #fff; border-radius: 10px;
  padding: 28px; flex: 0 0 auto;
}
.mi-person-aside__card h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  color: #fff; margin: 0 0 16px;
}
.mi-person-aside__stat {
  font-family: var(--font-display); font-size: 28px; color: var(--mi-tuerkis);
}
.mi-person-aside__stat--wide { font-size: 24px; }
.mi-person-aside__label {
  font-family: var(--font-body); font-size: 12px; opacity: 0.8;
}

.mi-prose h2 { margin: 32px 0 16px; }
.mi-prose p {
  font-family: var(--font-body); font-size: 20px; line-height: 32px;
  color: var(--fg); max-width: 760px; margin: 0 0 24px;
}

.mi-skipper-strip {
  display: grid; grid-template-columns: 1fr auto auto; gap: 24px;
  align-items: center;
  padding: 24px 32px;
  background: var(--mi-grey-95);
  border-radius: 10px;
  margin: 48px 0;
}
.mi-skipper-strip .arrow-pair { display: flex; gap: 8px; }

/* ---------- Blog overview ---------- */
.mi-blog-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 48px;
}
.mi-blog-card {
  display: flex; flex-direction: column; gap: 18px; cursor: pointer;
}
.mi-blog-card__img {
  aspect-ratio: 16/10; border-radius: 10px; background-size: cover; background-position: center;
  transition: transform 600ms ease;
}
.mi-blog-card:hover .mi-blog-card__img { transform: scale(1.03); }
.mi-blog-card__date {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mi-tuerkis);
}
.mi-blog-card__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 32px; line-height: 38px; color: var(--mi-petrol); letter-spacing: -0.005em;
  margin: 0;
}
.mi-blog-card__excerpt {
  font-family: var(--font-body); font-size: 17px; line-height: 28px; color: var(--fg);
  margin: 0;
}

/* ---------- Kontakt page ---------- */
.mi-kontakt {
  position: relative;
  min-height: 1000px;
  border-radius: 15px;
  overflow: hidden;
  margin-top: 100px;
}
.mi-kontakt__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mi-kontakt__overlay { position: absolute; inset: 0; background: rgba(0,182,190,0.85); }
.mi-kontakt__inner {
  position: relative; padding: 80px 100px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  color: #fff;
}
.mi-kontakt h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 60px; line-height: 70px; color: #fff;
  margin: 0 0 32px; letter-spacing: -0.005em;
}
.mi-kontakt h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 40px; line-height: 48px; color: #fff;
  margin: 32px 0 16px; letter-spacing: -0.005em;
}
.mi-kontakt p, .mi-kontakt address {
  font-family: var(--font-body); font-style: normal;
  font-size: 19px; line-height: 32px; color: #fff;
}
.mi-kontakt address a { color: #fff; }
.mi-kontakt-form { display:flex; flex-direction:column; gap: 16px; }
.mi-kontakt-form input, .mi-kontakt-form textarea {
  width: 100%; padding: 14px 18px; border: 0; border-radius: 5px;
  background: rgba(255,255,255,0.95);
  font-family: var(--font-body); font-size: 18px;
  color: var(--fg);
}
.mi-kontakt-form textarea { min-height: 160px; resize: vertical; }

/* ---------- Utility: container ---------- */
.mi-container { max-width: 1668px; margin: 0 auto; }