:root{
  --bg:#0f1114;
  --panel:rgba(255,255,255,0.04);
  --line:rgba(255,255,255,0.10);
  --line-soft:rgba(255,255,255,0.06);
  --text:rgba(255,255,255,0.88);
  --muted:rgba(255,255,255,0.62);
  --soft:rgba(255,255,255,0.42);
  --active:rgba(255,255,255,0.08);

  --patina-i:linear-gradient(180deg, rgba(41,155,162,0.40), rgba(9,73,77,0.26));
  --patina-ii:linear-gradient(180deg, rgba(213,202,180,0.40), rgba(177,170,151,0.26));
  --patina-iii:linear-gradient(180deg, rgba(21,20,19,0.42), rgba(2,2,2,0.40));

  --paper:#ddd2bb;
  --paper2:#d7ccb4;
  --ink:#1e1a14;
  --inksoft:rgba(30,26,20,.78);
}





.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px 20px 16px;
  box-sizing:border-box;
}

.topbar{
  display:flex;
  justify-content:center;
  align-items:center;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:auto !important;
}

.title{
  text-align:center;
  font-family:"Times New Roman",Times,serif;
  font-weight:700;
  letter-spacing:.7px;
  font-size:28px;
  color:rgba(255,255,255,.92);
}

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.05);
  color:var(--text);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  cursor:pointer;
}

.btn:hover{
  background:rgba(255,255,255,0.08);
}

.panel{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.scrollPanel{
  min-height:0;
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  overflow:auto;
  padding:10px;
  box-sizing:border-box;
}

.groupLabel{
  padding:10px 6px 6px;
  font-size:11px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:var(--soft);
}

/* crew.html */
.crew-overview .contentGrid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:14px;
  min-height:0;
  flex:1;
}

.crew-overview .leftPanel{
  overflow:hidden;
}

.crew-overview .panelHead{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.crew-overview .panelTitle{
  font-family:"Times New Roman",Times,serif;
  font-size:22px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

.crew-overview .sectionList{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

.crew-overview .sectionBtn{
  appearance:none;
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:14px 14px 13px;
  color:inherit;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

.crew-overview .sectionBtn:hover{
  filter:brightness(1.04);
}

.crew-overview .sectionBtn.active{
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
}

.crew-overview .sectionBtn.sectionI{background:var(--patina-i);}
.crew-overview .sectionBtn.sectionII{background:var(--patina-ii);}
.crew-overview .sectionBtn.sectionIII{background:var(--patina-iii);}

.crew-overview .sectionRole{
  font-size:11px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:5px;
}

.crew-overview .sectionName{
  font-size:17px;
  color:rgba(255,255,255,.92);
  margin-bottom:4px;
}

.crew-overview .sectionMeta{
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

.crew-overview .mainPanel{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.crew-overview .mainBody{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:0;
  min-height:0;
}

.crew-overview .profileBlock{
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.crew-overview .profileName{
  font-family:"Times New Roman",Times,serif;
  font-size:30px;
  line-height:1.05;
  font-weight:700;
  color:rgba(255,255,255,.95);
  margin:0 0 8px;
}

.crew-overview .profileMeta{
  font-size:14px;
  color:var(--muted);
  line-height:1.55;
}

.crew-overview .profileText{
  font-size:15px;
  color:rgba(255,255,255,.86);
  line-height:1.6;
  max-width:900px;
  white-space:pre-wrap;
}

.crew-overview .statusGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.crew-overview .statusCard{
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  padding:12px 12px 10px;
}

.crew-overview .statusLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.35px;
  color:var(--soft);
  margin-bottom:6px;
}

.crew-overview .statusValue{
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,.90);
  white-space:pre-wrap;
}

.crew-overview .noteBlock{
  padding:16px 18px;
  overflow:auto;
}

.crew-overview .noteTitle{
  font-family:"Times New Roman",Times,serif;
  font-size:20px;
  font-weight:700;
  margin:0 0 10px;
  color:rgba(255,255,255,.92);
}

.crew-overview .noteText{
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
  max-width:920px;
  white-space:pre-wrap;
}

.crew-overview .actionBar{
  padding:18px 18px 22px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:center;
  align-items:center;
}

.crew-overview .btnPrimary{
  min-width:270px;
  width:min(420px, 48%);
  padding:18px 28px;
  font-size:20px;
  line-height:1.2;
  border-radius:14px;
  font-weight:700;
  color:#1f1910;
  /*border:1px solid rgba(214,186,104,.34);*/
  border:1px solid rgba(60,61,65,.34);
  background:
    linear-gradient(180deg,
      rgba(180,150,70,.98) 0%,
      rgba(140,110,40,.96) 38%,
      rgba(124,96,34,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(213,194,143,.28),
    inset 0 -2px 4px rgba(0,0,0,.42),
    0 2px 8px rgba(0,0,0,.34);
  text-shadow:0 1px 0 rgba(255,232,170,.20);
}

.crew-overview .btnPrimary:hover{
  background:
    linear-gradient(180deg,
      rgba(212,182,100,.98) 0%,
      rgba(182,149,64,.96) 38%,
      rgba(135,105,39,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,240,186,.32),
    inset 0 -2px 5px rgba(0,0,0,.46),
    0 3px 10px rgba(0,0,0,.40);
}

.crew-overview .btnPrimary:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.48),
    0 1px 4px rgba(0,0,0,.28);
}

/* crew_active.html */
.crew-active .mainPanel{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  min-height:0;
  flex:1;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
}

.crew-active .contentGrid{
  min-height:0;
  display:grid;
  grid-template-columns:320px 310px 190px 1fr;
  gap:14px;
  padding:10px 12px 0;
  box-sizing:border-box;
}

.crew-active .col{
  min-height:0;
  display:flex;
  flex-direction:column;
}

.crew-active .crewBtn,
.crew-active .akteBtn,
.crew-active .patrolBtn{
  appearance:none;
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  border-radius:10px;
  padding:13px 14px 12px;
  color:inherit;
  cursor:pointer;
  margin-bottom:8px;
}

.crew-active .crewBtn:hover,
.crew-active .akteBtn:hover,
.crew-active .patrolBtn:hover{
  background:rgba(255,255,255,.05);
}

.crew-active .crewBtn.active,
.crew-active .akteBtn.active,
.crew-active .patrolBtn.active{
  background:var(--active);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.crew-active .crewRole,
.crew-active .akteRole,
.crew-active .patrolRole{
  font-size:11px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:5px;
}

.crew-active .crewName,
.crew-active .akteName,
.crew-active .patrolName{
  font-size:16px;
  color:rgba(255,255,255,.92);
  margin-bottom:4px;
  line-height:1.25;
}

.crew-active .crewMeta,
.crew-active .akteMeta,
.crew-active .patrolMeta{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  white-space:pre-wrap;
}

.crew-active .portraitCard{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:10px 8px 4px;
  margin-bottom:10px;
  flex:0 0 auto;
}

.crew-active .portraitFrame{
  width:min(100%, 238px);
  padding:10px;
  background:linear-gradient(
    180deg,
    rgba(214,206,188,0.98) 0%,
    rgba(196,187,169,0.98) 100%
  );
  border:1px solid rgba(78,67,52,0.34);
  box-shadow:
    0 2px 10px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 0 0 1px rgba(110,96,76,0.08);
}

.crew-active .portraitMat{
  padding:8px;
  background:linear-gradient(
    180deg,
    rgba(238,232,220,0.98) 0%,
    rgba(224,216,202,0.98) 100%
  );
  border:1px solid rgba(128,112,88,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(90,78,60,0.10);
}

.crew-active .portrait{
  display:block;
  width:100%;
  aspect-ratio:5 / 7;
  object-fit:cover;
  filter:
    saturate(0.82)
    contrast(0.94)
    brightness(0.96)
    sepia(0.10);
  border:1px solid rgba(70,58,44,0.42);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  background:rgba(40,40,40,0.16);
}

.crew-active .portraitCaption{
  margin-top:8px;
  text-align:center;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(210,205,192,0.66);
}

.crew-active .docWrap{
  min-height:0;
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
}

.crew-active .page{
  width:100%;
  height:100%;
  min-height:620px;
  background:linear-gradient(180deg, var(--paper), var(--paper2));
  color:var(--ink);
  border-radius:8px;
  box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 0 0 1px rgba(50,40,24,.12);
  position:relative;
  overflow:hidden;
  padding:34px 46px 40px;
  box-sizing:border-box;
  transform-origin:center center;
}

.crew-active .page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(0deg, rgba(60,42,18,.05), transparent 22%);
  pointer-events:none;
  mix-blend-mode:multiply;
}

.crew-active .page.aging-1{filter:saturate(.96) brightness(.99);}
.crew-active .page.aging-2{filter:saturate(.93) brightness(.97);}
.crew-active .page.aging-3{filter:saturate(.90) brightness(.95);}

.crew-active .pageTop{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 268px;
  gap:30px;
  align-items:start;
  margin-bottom:18px;
}

.crew-active .pageHeading{
  min-width:0;
}

.crew-active .pagePersonName{
  font-family:"Times New Roman",Times,serif;
  font-size:34px;
  line-height:1.02;
  font-weight:700;
  letter-spacing:.4px;
  color:var(--ink);
  margin:0 0 18px;
  text-transform:uppercase;
}

.crew-active .pageHeader{
  position:relative;
  z-index:1;
  margin-bottom:0;
}

.crew-active .pageKicker{
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(30,26,20,.72);
  margin-bottom:8px;
}

.crew-active .pageTitle{
  font-family:"Times New Roman",Times,serif;
  font-size:32px;
  line-height:1.05;
  font-weight:700;
  color:var(--ink);
  margin:0;
}

.crew-active .pagePortraitBlock{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.crew-active .pagePortraitFrame{
  width:100%;
  max-width:252px;
  padding:10px;
  background:linear-gradient(
    180deg,
    rgba(214,206,188,0.92) 0%,
    rgba(196,187,169,0.92) 100%
  );
  border:1px solid rgba(78,67,52,0.28);
  box-shadow:
    0 2px 10px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

.crew-active .pagePortraitMat{
  padding:8px;
  background:linear-gradient(
    180deg,
    rgba(238,232,220,0.92) 0%,
    rgba(224,216,202,0.92) 100%
  );
  border:1px solid rgba(128,112,88,0.20);
}

.crew-active .pagePortrait{
  display:block;
  width:100%;
  aspect-ratio:5 / 7;
  object-fit:cover;
  filter:saturate(.82) contrast(.94) brightness(.96) sepia(.10);
  border:1px solid rgba(70,58,44,0.34);
  box-shadow:0 1px 2px rgba(0,0,0,0.14);
  background:rgba(40,40,40,0.16);
}

.crew-active .kv{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:8px 20px;
  position:relative;
  z-index:1;
  font-family:"Courier New",Courier,monospace;
  font-size:16px;
  line-height:1.6;
  color:var(--inksoft);
  max-width:640px;
}

.crew-active .kv div:nth-child(odd){
  color:rgba(30,26,20,.82);
}

.crew-active .typebody{
  position:relative;
  z-index:1;
  font-family:"Courier New",Courier,monospace;
  font-size:16px;
  line-height:1.72;
  color:var(--inksoft);
  white-space:pre-wrap;
  max-width:100%;
}

.crew-active .typebody.tight{
  line-height:1.62;
}

.crew-active .highlight{
  margin:18px 0 18px 18px;
  line-height:2.02;
  letter-spacing:.18em;
  color:rgba(30,26,20,.84);
}

.crew-active .highlight.tight{
  line-height:1.9;
  letter-spacing:.13em;
}

.crew-active .pageFooter{
  position:absolute;
  left:46px;
  right:46px;
  bottom:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:"Courier New",Courier,monospace;
  font-size:12px;
  color:rgba(30,26,20,.52);
}

.crew-active .bottomBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.crew-active .btnRow{
  display:flex;
  gap:10px;
  align-items:center;
}

@media (max-width:1500px){
  .crew-active .contentGrid{
    grid-template-columns:290px 280px 180px 1fr;
  }

  .crew-active .pageTop{
    grid-template-columns:minmax(0, 1fr) 232px;
    gap:24px;
  }
}

@media (max-width:1280px){
  .crew-active .contentGrid{
    grid-template-columns:1fr;
  }

  .crew-active .page{
    min-height:560px;
    padding:28px 28px 40px;
  }

  .crew-active .pageTop{
    grid-template-columns:1fr;
    gap:18px;
  }

  .crew-active .pagePortraitBlock{
    justify-content:flex-start;
  }

  .crew-active .pagePortraitFrame{
    max-width:220px;
  }

  .crew-active .kv{
    max-width:100%;
    grid-template-columns:180px 1fr;
  }
}

@media (max-width:1024px){
  .crew-overview .contentGrid{
    grid-template-columns:1fr;
  }

  .crew-overview .statusGrid{
    grid-template-columns:1fr;
  }

  .crew-overview .btnPrimary{
    width:100%;
  }
}

/* ==========================================================
   GREY OCEAN CREW EMBEDDED V1
   Die Mannschaftsübersicht lebt direkt im Parent-DOM.
   Kein iframe-Compositing mehr für das Hauptfenster.
========================================================== */
.crewEmbedded{
  --bg: transparent;
  --panel: transparent;
  min-height:100%;
  background:transparent !important;
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
}

/* Hauptglas kommt ausschließlich von .cabinetOverlayInner */
.crewEmbedded .wrap{
  min-height:100%;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* Innerhalb nur Konturen – keine zusätzliche große Glasschicht */
.crewEmbedded .panel,
.crewEmbedded .leftPanel,
.crewEmbedded .mainPanel,
.crewEmbedded .scrollPanel,
.crewEmbedded .statusCard{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Bereich I–III behalten ihre eingefärbten Gläser */
.crewEmbedded .sectionBtn.sectionI{ background:var(--patina-i) !important; }
.crewEmbedded .sectionBtn.sectionII{ background:var(--patina-ii) !important; }
.crewEmbedded .sectionBtn.sectionIII{ background:var(--patina-iii) !important; }

/* Goldener Öffnen-Button bleibt */
.crewEmbedded .btnPrimary{
  background:
    linear-gradient(180deg,
      rgba(180,150,70,.98) 0%,
      rgba(140,110,40,.96) 38%,
      rgba(124,96,34,.98) 100%) !important;
}


/* GREY OCEAN CREW EMBEDDED V2 — Layout only; parent glass untouched */
.crewEmbedded{padding:18px 20px 20px;overflow:auto}
.crewEmbedded .wrap{display:flex;flex-direction:column;gap:14px;width:100%;min-height:100%;padding:0!important;margin:0!important}
.crewEmbedded .topbar{min-height:54px;display:flex;align-items:center;justify-content:center;padding:0 110px;background:transparent!important;border:0!important;box-shadow:none!important}
.crewEmbedded .title{text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,2vw,34px);font-weight:700;color:rgba(255,255,255,.92)}
.crewEmbedded .contentGrid{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto 1fr;gap:14px!important;min-height:0;background:transparent!important}
.crewEmbedded .crewSectionNav,.crewEmbedded .leftPanel{width:100%!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
.crewEmbedded .sectionList{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.crewEmbedded .sectionBtn{min-height:112px;width:100%;padding:14px 16px!important;text-align:left;border-width:1px!important;border-style:solid!important;border-radius:11px!important;box-shadow:none!important}
.crewEmbedded .sectionBtn.active{border-color:rgba(255,255,255,.34)!important}
.crewEmbedded .sectionRole{margin-bottom:5px;font-size:12px;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.52)}
.crewEmbedded .sectionName{margin-bottom:6px;font-size:17px;line-height:1.2;font-weight:650;color:rgba(255,255,255,.92)}
.crewEmbedded .sectionMeta{font-size:13px;line-height:1.42;color:rgba(255,255,255,.68)}
.crewEmbedded .mainPanel{min-width:0;border:1px solid rgba(255,255,255,.13)!important;border-radius:12px!important;overflow:hidden;background:transparent!important}
.crewEmbedded .mainBody{display:flex;flex-direction:column;min-height:100%;padding:0!important;background:transparent!important}
.crewEmbedded .profileBlock,.crewEmbedded .noteBlock,.crewEmbedded .actionBar{margin:0!important;padding:18px 20px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.crewEmbedded .profileBlock+.profileBlock,.crewEmbedded .statusGrid,.crewEmbedded .noteBlock,.crewEmbedded .actionBar{border-top:1px solid rgba(255,255,255,.09)!important}
.crewEmbedded .profileName{margin:0 0 7px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,2.2vw,38px);line-height:1.08;color:rgba(255,255,255,.94)}
.crewEmbedded .profileMeta,.crewEmbedded .profileText,.crewEmbedded .noteText{color:rgba(255,255,255,.70);line-height:1.5}
.crewEmbedded .noteTitle{margin-bottom:8px;font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:700;color:rgba(255,255,255,.90)}
.crewEmbedded .statusGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 20px!important;background:transparent!important}
.crewEmbedded .statusCard{min-height:78px;padding:12px 13px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:9px!important;background:transparent!important}
.crewEmbedded .statusLabel{margin-bottom:7px;font-size:11px;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.42)}
.crewEmbedded .statusValue{font-size:13px;line-height:1.42;color:rgba(255,255,255,.78)}
.crewEmbedded .actionBar{display:flex!important;justify-content:center;align-items:center;margin-top:auto!important}
.crewEmbedded .btnPrimary{width:min(420px,52%);min-width:240px;min-height:52px;border-radius:11px!important;font-size:18px;font-weight:700}
@media(max-width:900px){.crewEmbedded .sectionList{grid-template-columns:1fr}.crewEmbedded .sectionBtn{min-height:0}.crewEmbedded .statusGrid{grid-template-columns:1fr}.crewEmbedded .topbar{padding-left:20px;padding-right:20px}}
@media(max-width:620px){.crewEmbedded{padding:12px}.crewEmbedded .profileBlock,.crewEmbedded .noteBlock,.crewEmbedded .actionBar{padding:15px!important}.crewEmbedded .statusGrid{padding:12px 15px!important}.crewEmbedded .btnPrimary{width:100%;min-width:0}}

/* ==========================================================
   GREY OCEAN — CREW MANAGEMENT V4 / NEUE BASIS
   Layout nach neuer Referenz:
   - Kopf links / Schließen rechts
   - Bereich I–III horizontal oben
   - darunter großer zweispaltiger Inhaltsbereich
   - links Informationen, rechts ruhige Raumfläche + Öffnen unten rechts
   - keine zusätzlichen grauen Flächen
========================================================== */

.crewEmbedded{
  padding:18px 22px 22px !important;
  overflow:auto !important;
}

/* Hauptinhalt bleibt vollständig materiallos; Glas kommt aus dem Parent */
.crewEmbedded,
.crewEmbedded .wrap,
.crewEmbedded .contentGrid,
.crewEmbedded .mainPanel,
.crewEmbedded .mainBody,
.crewEmbedded .crewInfoCol,
.crewEmbedded .crewStageCol{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */
.crewEmbedded .wrap{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  width:100% !important;
  min-height:100% !important;
  padding:0 !important;
  margin:0 !important;
}

.crewEmbedded .topbar{
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:0 105px 0 2px !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:transparent !important;
}

.crewEmbedded .title{
  margin:0 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-align:left !important;
  color:rgba(255,255,255,.92) !important;
}

/* ----------------------------------------------------------
   BEREICH I / II / III
---------------------------------------------------------- */
.crewEmbedded .contentGrid{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:14px !important;
  flex:1 1 auto !important;
  min-height:0 !important;
}

.crewEmbedded .crewSectionNav,
.crewEmbedded .leftPanel{
  width:100% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.crewEmbedded .sectionList{
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  overflow:visible !important;
}

.crewEmbedded .sectionBtn{
  position:relative !important;
  min-height:122px !important;
  margin:0 !important;
  padding:15px 16px 14px 82px !important;
  border-radius:12px !important;
  border-width:1px !important;
  border-style:solid !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* römische Kennung als ruhiges Element, ohne neue Assets */
.crewEmbedded .sectionBtn::before{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:1px solid currentColor;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  font-weight:700;
  line-height:1;
  opacity:.92;
}
.crewEmbedded .sectionBtn.sectionI::before{content:"I";color:rgba(90,210,211,.90)}
.crewEmbedded .sectionBtn.sectionII::before{content:"II";color:rgba(215,177,80,.92)}
.crewEmbedded .sectionBtn.sectionIII::before{content:"III";color:rgba(202,78,68,.92)}

.crewEmbedded .sectionBtn.sectionI{
  border-color:rgba(63,156,154,.58) !important;
  background:linear-gradient(180deg,rgba(22,102,104,.48),rgba(8,49,51,.32)) !important;
}
.crewEmbedded .sectionBtn.sectionII{
  border-color:rgba(180,150,88,.54) !important;
  background:linear-gradient(180deg,rgba(126,112,89,.56),rgba(82,75,64,.40)) !important;
}
.crewEmbedded .sectionBtn.sectionIII{
  border-color:rgba(133,70,65,.50) !important;
  background:linear-gradient(180deg,rgba(47,31,30,.54),rgba(19,17,17,.42)) !important;
}

.crewEmbedded .sectionBtn.active{
  border-color:rgba(255,255,255,.34) !important;
}
.crewEmbedded .sectionBtn:hover{
  filter:brightness(1.08);
}

.crewEmbedded .sectionRole{
  margin:0 0 5px !important;
  font-size:11px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  color:rgba(255,255,255,.48) !important;
}
.crewEmbedded .sectionName{
  margin:0 0 7px !important;
  font-size:17px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.93) !important;
}
.crewEmbedded .sectionMeta{
  font-size:12px !important;
  line-height:1.42 !important;
  color:rgba(255,255,255,.67) !important;
}

/* ----------------------------------------------------------
   GROSSER INHALTSBEREICH
---------------------------------------------------------- */
.crewEmbedded .mainPanel{
  min-height:0 !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:12px !important;
  overflow:hidden !important;
}

.crewEmbedded .crewMainLayout{
  display:grid !important;
  grid-template-columns:minmax(420px,44%) minmax(0,1fr) !important;
  min-height:460px !important;
  height:100% !important;
}

/* linke Informationsspalte */
.crewEmbedded .crewInfoCol{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
}

.crewEmbedded .crewIntro,
.crewEmbedded .crewMeaning,
.crewEmbedded .crewNote{
  margin:0 !important;
  padding:18px 20px !important;
  border:0 !important;
  border-radius:0 !important;
}

.crewEmbedded .crewMeaning,
.crewEmbedded .crewFacts,
.crewEmbedded .crewNote{
  border-top:1px solid rgba(255,255,255,.09) !important;
}

.crewEmbedded .profileName{
  margin:0 0 9px !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:34px !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.95) !important;
}

.crewEmbedded .profileMeta{
  font-size:13px !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.72) !important;
}

.crewEmbedded .noteTitle{
  margin:0 0 8px !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:17px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.91) !important;
}

.crewEmbedded .profileText,
.crewEmbedded .noteText{
  font-size:13px !important;
  line-height:1.52 !important;
  color:rgba(255,255,255,.73) !important;
}

/* Zugriff/Inhalt/Weiterführung jetzt vertikal statt drei Kästen nebeneinander */
.crewEmbedded .crewFacts{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
}

.crewEmbedded .statusCard{
  min-height:0 !important;
  padding:13px 20px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.crewEmbedded .statusCard + .statusCard{
  border-top:1px solid rgba(255,255,255,.08) !important;
}

.crewEmbedded .statusLabel{
  margin:0 0 5px !important;
  font-size:11px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  color:rgba(211,174,93,.88) !important;
}
.crewEmbedded .statusValue{
  font-size:13px !important;
  line-height:1.42 !important;
  color:rgba(255,255,255,.77) !important;
}

.crewEmbedded .crewNote{
  margin-top:auto !important;
}

/* rechte, absichtlich ruhige Fläche */
.crewEmbedded .crewStageCol{
  position:relative !important;
  min-width:0 !important;
  min-height:100% !important;
}

.crewEmbedded .crewStageCol::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0) 28%),
    linear-gradient(0deg,rgba(0,0,0,.16),rgba(0,0,0,0) 36%);
}

.crewEmbedded .crewStageCol .actionBar{
  position:absolute !important;
  right:22px !important;
  bottom:22px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.crewEmbedded .btnPrimary{
  width:250px !important;
  min-width:250px !important;
  min-height:54px !important;
  padding:0 28px !important;
  border-radius:11px !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:700 !important;
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media(max-width:1100px){
  .crewEmbedded .crewMainLayout{
    grid-template-columns:minmax(360px,48%) minmax(0,1fr) !important;
  }
}

@media(max-width:900px){
  .crewEmbedded .sectionList{
    grid-template-columns:1fr !important;
  }
  .crewEmbedded .sectionBtn{
    min-height:94px !important;
  }
  .crewEmbedded .crewMainLayout{
    grid-template-columns:1fr !important;
  }
  .crewEmbedded .crewInfoCol{
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
  }
  .crewEmbedded .crewStageCol{
    min-height:150px !important;
  }
}

@media(max-width:620px){
  .crewEmbedded{padding:12px !important}
  .crewEmbedded .title{font-size:21px !important}
  .crewEmbedded .sectionBtn{padding-left:68px !important}
  .crewEmbedded .sectionBtn::before{
    left:14px;
    width:36px;
    height:36px;
    font-size:18px;
  }
  .crewEmbedded .crewIntro,
  .crewEmbedded .crewMeaning,
  .crewEmbedded .crewNote{
    padding:15px !important;
  }
  .crewEmbedded .statusCard{padding:12px 15px !important}
  .crewEmbedded .crewStageCol .actionBar{
    left:15px !important;
    right:15px !important;
    bottom:15px !important;
  }
  .crewEmbedded .btnPrimary{
    width:100% !important;
    min-width:0 !important;
  }
}

/* ==========================================================
   GREY OCEAN — CREW MANAGEMENT V5 / REFINEMENT
   Technische Umsetzung der neuen Basis:
   - Hauptglas unverändert
   - Titel wieder mittig, ohne Trennlinie
   - Bereich I türkis, II orange, III dunkles Grau
   - zweites großes Fenster = mainPanel
   - drittes Fenster "Männer an Bord" = crewInfoCol
   - interne Trennlinien eingerückt
========================================================== */

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */
.crewEmbedded .topbar{
  justify-content:center !important;
  padding:0 105px !important;
  border-bottom:0 !important;
}

.crewEmbedded .title{
  width:100% !important;
  text-align:center !important;
  margin:0 !important;
}

/* ----------------------------------------------------------
   BEREICH I / II / III — Rahmen/Farblogik
---------------------------------------------------------- */

/* Bereich I: passendes Türkis statt grauer Rahmen */
.crewEmbedded .sectionBtn.sectionI{
  border-color:rgba(63,156,154,.78) !important;
  background:
    linear-gradient(180deg,
      rgba(21,94,96,.50) 0%,
      rgba(8,43,45,.34) 100%) !important;
}
.crewEmbedded .sectionBtn.sectionI::before{
  color:rgba(79,194,192,.96) !important;
  border-color:rgba(79,194,192,.88) !important;
}

/* Bereich II: Orange statt Gelb/Gold */
.crewEmbedded .sectionBtn.sectionII{
  border-color:rgba(210,116,43,.78) !important;
  background:
    linear-gradient(180deg,
      rgba(126,72,34,.54) 0%,
      rgba(66,42,28,.38) 100%) !important;
}
.crewEmbedded .sectionBtn.sectionII::before{
  color:rgba(230,135,57,.96) !important;
  border-color:rgba(230,135,57,.88) !important;
}

/* Bereich III: dunkles, zurückhaltendes Grau */
.crewEmbedded .sectionBtn.sectionIII{
  border-color:rgba(117,122,126,.62) !important;
  background:
    linear-gradient(180deg,
      rgba(50,52,54,.50) 0%,
      rgba(24,25,26,.42) 100%) !important;
}
.crewEmbedded .sectionBtn.sectionIII::before{
  color:rgba(150,154,158,.86) !important;
  border-color:rgba(150,154,158,.72) !important;
}

/* ----------------------------------------------------------
   ZWEITES GROSSES FENSTER IM HAUPTGLAS
   = mainPanel
---------------------------------------------------------- */
.crewEmbedded .mainPanel{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;
  padding:12px !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* ----------------------------------------------------------
   DRITTES FENSTER "MÄNNER AN BORD"
   = crewInfoCol
---------------------------------------------------------- */
.crewEmbedded .crewMainLayout{
  grid-template-columns:minmax(430px,44%) minmax(0,1fr) !important;
  gap:14px !important;
  min-height:460px !important;
}

.crewEmbedded .crewInfoCol{
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:11px !important;
  overflow:hidden !important;
  background:rgba(0,0,0,.08) !important;
}

/* rechte Fläche bleibt bewusst ruhig, ohne eigenes Fenster */
.crewEmbedded .crewStageCol{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

/* ----------------------------------------------------------
   INTERNE TRENNLINIEN
   Nicht mehr von Kante zu Kante.
---------------------------------------------------------- */

/* bestehende Full-width Borders entfernen */
.crewEmbedded .crewMeaning,
.crewEmbedded .crewFacts,
.crewEmbedded .crewNote{
  border-top:0 !important;
}

.crewEmbedded .statusCard + .statusCard{
  border-top:0 !important;
}

/* jeder Abschnitt erhält eine eingerückte Linie davor */
.crewEmbedded .crewMeaning,
.crewEmbedded .crewFacts,
.crewEmbedded .crewNote{
  position:relative !important;
}

.crewEmbedded .crewMeaning::before,
.crewEmbedded .crewFacts::before,
.crewEmbedded .crewNote::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:1px;
  background:rgba(255,255,255,.13);
  pointer-events:none;
}

/* Statuszeilen ebenfalls mit eingerückten Trennlinien */
.crewEmbedded .statusCard{
  position:relative !important;
}

.crewEmbedded .statusCard + .statusCard::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:1px;
  background:rgba(255,255,255,.11);
  pointer-events:none;
}

/* Außenabstände im dritten Fenster etwas ruhiger */
.crewEmbedded .crewIntro,
.crewEmbedded .crewMeaning,
.crewEmbedded .crewNote{
  padding-left:20px !important;
  padding-right:20px !important;
}

.crewEmbedded .statusCard{
  padding-left:20px !important;
  padding-right:20px !important;
}

/* Öffnen-Button bleibt innerhalb des zweiten großen Fensters rechts unten */
.crewEmbedded .crewStageCol .actionBar{
  right:18px !important;
  bottom:18px !important;
}

/* ----------------------------------------------------------
   Responsive Korrektur
---------------------------------------------------------- */
@media(max-width:900px){
  .crewEmbedded .mainPanel{
    padding:10px !important;
  }

  .crewEmbedded .crewInfoCol{
    border-right:1px solid rgba(255,255,255,.16) !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
  }
}

/* ==========================================================
   GREY OCEAN — CREW MANAGEMENT V6
   Zweites großes Fenster als durchgehende Bubble:
   - Füllung liegt vollständig auf .mainPanel
   - keine separate rechteckige Teilfläche mehr in .crewStageCol
========================================================== */

/* Zweites großes Fenster komplett und gleichmäßig füllen */
.crewEmbedded .mainPanel{
  background:rgba(0,0,0,.16) !important;
  background-image:none !important;
}

/* Rechte Hälfte darf keine eigene rechteckige Fläche mehr erzeugen */
.crewEmbedded .crewStageCol{
  background:transparent !important;
  background-image:none !important;
}

.crewEmbedded .crewStageCol::before{
  content:none !important;
  display:none !important;
  background:none !important;
}